css3动大转盘,css3的animation大转盘写法

alternate 动画会在厅数次数(1,3,5等等)正常播放，面在偶数次数(2，4，4)向后播放html>

Document

*{

padding: 0;

margin: 0;

}

#herhr{

display: block;

margin: 10px auto;

border: 1px solid blue;

/*transform: rotate(60deg);   infinite让它一直转*/

/*animation: hger  10s linear infinite;*/

/*alternate 动画会在厅数次数(1,3,5等等)正常播放，面在偶数次数(2，4，4)向后播放。*/

/*animation: hger  5s linear infinite alternate;*/

animation: hger  10s linear infinite;

/*给图片加个圆角*/

border-radius: 60%;

}

#herhr:hover{

/*play 游戏    state  规定   paused  暂停  当鼠标放在转盘的时候暂停的意思*/

animation-play-state: paused;

}

@keyframes hger{

from{

transform: rotate(0deg);

}

to{

transform: rotate(360deg);

}

}