demo地址:http://codepen.io/tianzi77/pen/pJYQLw
结构html:
<!--做一名合格的页面仔-->
<div id="nav">
<ul>
<li>hl</li>
<li>hl</li>
<li>hl</li>
<li>hl</li>
<li>hl</li>
<li>hl</li>
<li>hl</li>
<li>hl</li>
<li>hl</li>
<li>hl</li>
<li>hl</li>
</ul>
</div>
<!--应该从规范代码开始-->
样式:
*{
padding: 0;
margin: 0;
}
body{
font-family:sans-serif;
}
div#nav ul{
width: 852.7px;
line-height: 40px;
height: 40px;
margin: 100px auto;
}
div#nav ul li{
float: left;
list-style: none;
width: 75.7px;
height: 40px;
background: yellow;
border-right: 2px dotted lightpink;
text-align: center;
cursor: pointer;
color: #abcdef;
border-radius: 10px;
transition: all .8s linear;
font: 20px;
transform: rotate(-30deg);
}
div#nav ul li:last-child{
border-right: none;
}
div#nav ul li:nth-child(6){
transform: rotate(0deg);
background: -webkit-linear-gradient(left top,red,yellow);
}
div#nav ul li:nth-child(1),div#nav ul li:nth-child(2),div#nav ul li:nth-child(3),div#nav ul li:nth-child(4),div#nav ul li:nth-child(5){
background:red;
color: black;
}
div#nav ul li:hover{
background: #abcdef;
color: #fff;
transform: rotate(360deg) scale(1.4);
border-radius: 50%;
font-size: 40px;
}
div#nav ul li:nth-child(6):hover{
transform: rotate(3600deg);
}
ps:好想睡觉