<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>导航条2</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#nav{
width: 1000px;
margin:10px auto;
text-align: center;
/*border: 1px black solid;*/
position: relative;
}
#nav ul li{
float: left;
/*display: inline-block;*/
width: 116px;
height: 116px;
/*border: 1px black solid;*/
margin: 0 20px 80px 20px;
cursor: pointer;
position: relative;
border-radius: 50%;
transition:all 0.4s;
-webkit-transition:all 0.4s;
}
#nav ul li p{
width: 100%;
position: absolute;
left: 0;
top:126px;
font-size: 16px;
color: #414141;
display: block;
font-weight: bold;
}
#nav ul li div{
width: 102px;
height: 102px;
background: #414141 url("aaa.png");
left: 7px;
top:7px;
transition:all 0.4s;
-webkit-transition:all 0.4s;
position: absolute;
border-radius: 50%;
}
#nav ul li .n1{
}
#nav ul li .n2{
background-position: -102px 0px;
}
#nav ul li .n3{
background-position: -204px 0px;
}
#nav ul li .n4{
background-position: -306px 0px;
}
#nav ul li .n5{
background-position: -408px 0px;
}
#nav ul li .n6{
background-position: -510px 0px;
}
#nav ul li a {
width: 100%;
height: 100%;
display: inline-block;
}
#nav ul li:hover{
background: rgba(0,0,0,0.5);
}
#nav ul li:hover div{
transform:rotate(360deg);
background-color: #0ff;
}
</style>
</head>
<body>
<nav id = "nav">
<ul>
<li>
<div class="n1">
<a href="#"></a>
</div>
<p>网站建设</p>
</li>
<li>
<div class="n2">
<a href="#"></a>
</div>
<p>网站设计</p>
</li>
<li>
<div class="n3">
<a href="#"></a>
</div>
<p>SEO优化</p>
</li>
<li>
<div class="n4">
<a href="#"></a>
</div>
<p>WAP/APP</p>
</li>
<li>
<div class="n5">
<a href="#"></a>
</div>
<p>网站营销</p>
</li>
<li>
<div class="n6">
<a href="#"></a>
</div>
<p>网站策划</p>
</li>
</ul>
</nav>
</body>
</html>