css3实现动态圆形导航栏

最新推荐文章于 2021-03-09 02:48:55 发布

我的前端学习笔记

最新推荐文章于 2021-03-09 02:48:55 发布

阅读量1.7k

点赞数

分类专栏：技术文章标签： css3 动画导航

本文链接：https://blog.csdn.net/u012181244/article/details/40652663

版权

技术专栏收录该内容

39 篇文章 0 订阅

订阅专栏

核心问题：

1.圆形怎样实现？

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

2.怎样实现动画效果？

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

3.动画样式？

动画样式有很多很多，基本上能更改的属性样式都能形成动画。实例中：在圆角之前li标签是个“方块”，通过更改border的上下左右颜色实现动画，看起来像外部的“环”在旋转。

<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>

效果图：