<h2>鼠标经过动画会停止,移开恢复</h2>
<div id="ball"><img src="http://www.mrszhao.com/zb_users/upload/2018/01/rotate/images/bg-gear-f_089274a.png"></div>
body{
font:1em "microsoft Yahei";
color:#fff;
background-color:#333;
padding:20px;
}
#ball{
width:126px;
height:126px;
animation:rotate 5s linear infinite ;
}
#ball:hover{
animation-play-state:paused; /*暂停动画*/
}
@keyframes rotate{
0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.