任鸟飞专注于网页设计。

CSS3 新增了大量属性，在实际使用过程中，需要充分挖掘这些属性的潜力，才能制作出富有创意的作品。这里就介绍一个如何利用 CSS3 的 transition 属性来制作一个具有过渡效果的导航栏。

利用CSS3 的 transition 属性制作过渡效果的导航栏 实例预览

HTML 代码

<ul id="navigation">
<li><a href="http://renniaofei.com">首页</a></li>
<li><a href="http://renniaofei.com/category/design">设计</a></li>
<li><a href="http://renniaofei.com/category/graphic">图像</a></li>
<li><a href="http://renniaofei.com/category/inspiration">灵感</a></li>
<li><a href="http://renniaofei.com/category/freebies">素材</a></li>
<li><a href="http://renniaofei.com/category/code">编码</a></li>
<li><a href="http://renniaofei.com/category/tools">工具</a></li>
<li><a href="http://renniaofei.com/category/internet">互联</a></li>
<li><a href="http://renniaofei.com/category/network">联盟</a></li>
<li><a href="http://renniaofei.com/friendlink/">推荐</a></li>
</ul>

CSS 代码

ul#navigation {
	background: #00467f;
	height: 60px;
	margin: 0 auto;
	text-align: center;
}
ul#navigation li {
	height: 60px;
	display: inline-block;
 *display: inline; /* for IE6 & IE7 */
}
ul#navigation li a, ul#navigation li a:link, ul#navigation li a:visited {
	display: inline-block;
 *display: inline; /* for IE6 & IE7 */
	height: 48px;
	text-align: center;
	line-height: 60px;
	color: #fff;
	text-decoration: none;
	padding: 0 15px;
	-webkit-transition: color 0.4s linear; /* CSS3 过渡效果代码 */
	-moz-transition: color 0.4s linear;
	-o-transition: color 0.4s linear;
	font-size: 32px;
}
ul#navigation li a:hover, ul#navigation li a:active, ul#navigation li a:focus {
	color: #7191cd;
}

CSS3 的 transition 属性代码说明

-webkit-transition: color 0.4s linear; /* CSS3 过渡效果代码 */

• color：对 color 属性使用过渡效果，本例中，color 初始的颜色是 #fff （白色），当鼠标滑过时（a:hover）, color 的颜色变为color: #7191cd 。
• 0.4s：过渡效果的时间。
• linear：过渡计时方式为 linear。也即线性过滤。