鼠标悬停，图标会一直不停旋转。
如果实现图标一直不停旋转，则需要使用animation动画。先制作动画的各个关键帧，然后在图标中运用这一动画。
具体操作如下：
这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：
<!DOCTYPE html><html>
<head>
<title>HTML5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
img{width: 200px}
.div1{width: 200pxheight: 200pxborder:1px solid #000margin: 150px auto}
.animate1{
-webkit-animation: move1 2s infinite
}
.animate2{
-webkit-animation: move2 1s infinite
}
@-webkit-keyframes move1{
0%{
-webkit-transform:scale(1)
}
100%{
-webkit-transform:scale(1.5)
}
}
@-webkit-keyframes move2{
0%{
-webkit-transform: rotateZ(0deg) scale(1.5)
-webkit-transform:
}
100%{
-webkit-transform: rotateZ(360deg) scale(1.5)
}
}
</style>
</head>
<body>
<div class="div1 animate2"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.querySelector(".div1")
oDiv.className="div1 animate1"
setTimeout(function(){
oDiv.className="div1 animate2"
},2000)
}
</script>
</body>
</html>
原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。
当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。代码如下：可以复制运行下试试：
<html>
<head>
<style>
body {
background:#ddd
}
.keleyi {
width: 220px
height: 220px
margin: 0 auto
background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top
-webkit-background-size: 220px 220px
-moz-background-size: 220px 220px
background-size: 220px 220px
-webkit-border-radius: 110px
border-radius: 110px
-webkit-transition: -webkit-transform 2s ease-out
-moz-transition: -moz-transform 2s ease-out
-o-transition: -o-transform 2s ease-out
-ms-transition: -ms-transform 2s ease-out
}
.keleyi:hover {
-webkit-transform: rotateZ(360deg)
-moz-transform: rotateZ(360deg)
-o-transform: rotateZ(360deg)
-ms-transform: rotateZ(360deg)
transform: rotateZ(360deg)
}
</style>
</head>
<body>
<div class="keleyi"></div>
</body>
</html>
