0元购京东自营斐讯K2路由器返399元活动
置顶

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

作者:     目录: 小代码     发表: 2010年07月16日

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

利用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。也即线性过滤。

发表评论

电子邮件地址不会被公开。 必填项已用*标注