css3样式表制作鼠标滑过导航条淡进淡出效果

先看效果：





代码如下：

*{margin:0;padding:0;}
html{background:url('images/bg_tile.jpg') #333d43;}
body{background:url('images/bg_head.jpg') repeat-x top center, url('images/bg_vert.jpg') repeat-x;min-height:500px;font:14px/1.3 'Segoe UI',Arial, sans-serif;color:#888;padding:10px;}
a, a:visited {text-decoration:none;outline:none;color:#54a6de;}
a:hover{text-decoration:underline;}
/*----------------------------CSS3 Animated Navigation-----------------------------*/
.fancyNav{overflow:hidden;display:inline-block;margin:160px auto;}
.fancyNav li{background-color:#f0f0f0;background-image:-webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));background-image:-moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);background-image:-o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);background-image:-ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);background-image:linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);border-right:1px solid rgba(9, 9, 9, 0.125);box-shadow:1px -1px 0 rgba(255, 255, 255, 0.6) inset;-moz-box-shadow:1px -1px 0 rgba(255, 255, 255, 0.6) inset;-webkit-box-shadow:1px -1px 0 rgba(255, 255, 255, 0.6) inset;position:relative;float:left;list-style:none;}
.fancyNav li:after{content:'.';text-indent:-9999px;overflow:hidden;position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;opacity:0;background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;-moz-transition:0.25s all;-webkit-transition:0.25s all;-o-transition:0.25s all;transition:0.25s all;}
.fancyNav li:first-child{border-radius:4px 0 0 4px;}
.fancyNav li:first-child:after,.fancyNav li.selected:first-child:after{box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;border-radius:4px 0 0 4px;}
.fancyNav li:last-child{border-radius:0 4px 4px 0;}
.fancyNav li:last-child:after,.fancyNav li.selected:last-child:after{box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;border-radius:0 4px 4px 0;}
.fancyNav li:hover:after,.fancyNav li.selected:after,.fancyNav li:target:after{opacity:1;}
.fancyNav:hover li.selected:after,.fancyNav:hover li:target:after{opacity:0;}
.fancyNav li.selected:hover:after,.fancyNav li:target:hover:after{opacity:1 !important;}
.fancyNav li a{color:#5d5d5d;display:inline-block;font:20px/1 Lobster,Arial,sans-serif;padding:12px 35px 14px;position:relative;text-shadow:1px 1px 0 rgba(255, 255, 255, 0.6);z-index:2;text-decoration:none !important;white-space:nowrap;}
.fancyNav a.homeIcon{background:url('images/home.png') no-repeat center center;display:block;overflow:hidden;padding-left:12px;padding-right:12px;text-indent:-9999px;width:16px;}

HTML代码如下：

<div style="margin:0 auto;width:980px;text-align:center;">
<ul class="fancyNav">
<li id="home"><a href="#home" class="homeIcon">Home</a></li>
<li id="news"><a href="#news">zhaoqingbei</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>
</div>

字体如：
<!-- 其中包括从谷歌的字体目录龙虾字体 -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<!-- 启用Internet Explorer的支持HTML5-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->