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