标签：
要将图标旋转，只需使用transform的rotate以及transition即可完成旋转的动画效果。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果;
ease-in 规定以慢速开始的过渡效果;
ease-out 规定以慢速结束的过渡效果;
ease-in-out 规定以慢速开始和结束的过渡效果
li a i {
background: url(icon.png) no-repeat; display: block; width: 42px; height: 32px; position: relative; z-index: 10; float:left;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
完整：
<style>
ul { width: 145px; margin: 0 auto; list-style: none; font-size: 30px;background-color: #ffe184;}
li{padding:10px; background-color: #ff4d52; }
li a{width:145px;height:42px;line-height:36px;display:block;color:#333; background-color: #ffff00;}
li a:hover{text-decoration:none}
li a i { background: url(images/icon.png) no-repeat; display: block; width: 42px; height: 32px; position: relative; z-index: 10; float:left;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-ms-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
background-color: #003399;
}
li a:hover i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
li.female a i { background-position: 0 0; }
li.arrow a i { background-position: 0 -50px; }
</style>
<ul class="icos">
<li class="female"><a href="#"><i></i>女生</a></li>
<li class="arrow"><a href="#"><i></i>箭头</a></li>
</ul>
标签：
原文地址：http://www.cnblogs.com/hubl/p/5799654.html
