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/data/img/dmj/201903091552104923184182.jpg" alt="">
</body>
</html>
原文链接：https://www.qiquanji.com/post/7562.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知