任鸟飞网站设计博客

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

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

HTML 代码

<ul id="navigation">
<li><a href="http://www.renniaofei.com">首页</a></li>
<li><a href="http://www.renniaofei.com/category/design/">设计</a></li>
<li><a href="http://www.renniaofei.com/category/graphic/">图像</a></li>
<li><a href="http://www.renniaofei.com/category/inspiration/">灵感</a></li>
<li><a href="http://www.renniaofei.com/category/freebies/">素材</a></li>
<li><a href="http://www.renniaofei.com/category/code/">编码</a></li>
<li><a href="http://www.renniaofei.com/category/tools/">工具</a></li>
<li><a href="http://www.renniaofei.com/category/internet/">互联</a></li>
<li><a href="http://www.renniaofei.com/category/network/">联盟</a></li>
<li><a href="http://www.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。也即线性过滤。