程序员 mysql linux命令 Ubuntu 微软 Windows linux Firefox php Python google shell centos HTML5 Android nginx apache java 开源 wordpress

CSS3导航栏悬浮动画

支持Chrome、FireFox、Safari;IE8有效果但是没有动画,IE9、IE10没有测试;Opera虽然支持伪元素,但是不支持动画,令人费解啊,不过我大Opera已经投向了Webkit怀抱!

具体效果看上面的导航栏↑↑

#menu ul li a {
	display: block;
	border-bottom: 0;
	color: #6a6a6a;
	line-height: 40px;
	text-transform: uppercase;
	text-decoration: none;
	position: relative;
	height: 41px;
	margin-bottom: -1px;
}
#menu ul li a:after,
#menu ul li a:before {
	position: absolute;
	width: 0;
	height: 1px;
	left: 50%;
	bottom: 0;
	border-bottom: 1px solid #6a6a6a;
	content: "";
	z-index: 999;
        -webkit-transition: width .3s, left .3s;
        -moz-transition: width .3s, left .3s;
        transition: width .3s, left .3s;
}
#menu ul li a:hover:before {
	left: 0;
	width: 60%;
}
#menu ul li a:hover:after {
	width: 60%;
}

延伸阅读

评论