请叫我一米

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

先来看 HTML

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

<!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 的服务器上，不过几乎都是英文字体，对国内用处不是非常大。
更多…

永远有多远，或许只有一米的距离.

纯 CSS3 动画导航菜单