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

作者:     目录: PHP+MySQL     发表: 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。也即线性过滤。

8 个评论

  1. Pingback: 利用CSS3的transition属性制作可伸缩的输入框 | 任鸟飞网页设计博客 | 前端开发 | 美工设计 | 网站推广
  2. Pingback: IE9试用体验 « 任鸟飞网页设计博客
  3. Pingback: HTML5新增元素标记 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客
  4. 老七 says:

    这个绝对要收藏

  5. 任鸟飞 says:

    @菜根谈 CSS3早就出来了,很强大…… 😛

  6. 菜根谈 says:

    html5出来后,css的样式就更强大了啊

  7. 任鸟飞 says:

    @大智若鲁 呵呵,看来以后得多提供一些专业技术方面的文章。

  8. 大智若鲁 says:

    技术贴,收藏了

发表评论