来源:

http://isux.tencent.com/css-animation-skills.html

以记录。

此教程,完全使用CSS3 制作一个动态的导航菜单,不使用 JavaScript 等技术。

先来看 HTML

首先第一步是使用HTML完成网站的结构,此处 使用了很多 HTML5 方面的内容,但是对于IE6 7 8来说,必须使用另一种技术来使其支持 HTML5,这里使用 html5.js详细),需要放在 <Head> 标签之中,使用了条件判断,只对IE有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< !DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <!-- Including the Lobster font from Google's Font Directory -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
        <!-- Enabling HTML5 support for Internet Explorer -->
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        < ![endif]-->
    </head>
   <body>
        <header>
            <h1>CSS3 Animated Navigation Menu</h1>
            <h2>&laquo; Read and download on Tutorialzine</h2>
        </header>
        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>
        <footer>Looks best in Firefox 4, usable everywhere.</footer>
    </body>
</html>

此处使用了Google  Web Font API,包括了100多种字体文件,可以随时使用在自己的项目上,当然都托管在 Google 的服务器上,不过几乎都是英文字体,对国内用处不是非常大。
阅读更多...