css3实现动态圆形导航栏

核心问题：

1.圆形怎样实现？

css3的圆角属性：border-radius:__ px; 把值设大点就圆啦。

2.怎样实现动画效果？

css3的transition属性：transition:__ s;控制转变过程的时间，时间不要太短也不要太长。

3.动画样式？

<html>
<head>
<style>
body{
	margin:0px;
	padding:0px;
	font:Arial 12px;
}
ul{
	list-style-type:none;
}
li{
	width:40px;
	height:40px;
	background:#ccc;
	margin:10px;
	float:left;
	text-align: center;
	line-height: 40px;
	border:8px solid;
	border-radius:40px;
	border-color:#999 #555 #999 #555;
}

li:hover{
	border-color:#555 #999 #555 #999;
}
li{
	transition:1s;
}
a{
	text-decoration:none;
}
</style>
<head>
		<body>
			<div>
				<ul>
					<li><a href='';>首页</a></li>
					<li><a href='';>博文</a></li>
					<li><a href='';>关于</a></li>
				</ul>			
			</div>
		</body>
</html>

效果图：

鼠标放在“首页”上时：

以下是各浏览器对border-radius的支持明细：

相关文章：

你感兴趣的文章：

标签云：