css3的animation大转盘写法
alternate 动画会在厅数次数(1,3,5等等)正常播放，面在偶数次数（2，4，4）向后播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ 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); } } </style> </head> <body> <img id="herhr" src="https://www.qiquanji.com/mip/data/img/dmj/201903091552104923184182.jpg" alt=""> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知