CSS实现图片旋转(原地转圈)
css能让图片转动起来,而且很简单,适用的场景包括音频是否在播放
如果视频播放的时候我们就让图片转圈,而且想转的快或者慢都可以加以控制。
代码示例如下
css code
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.img-rotate{
-webkit-transform: rotate(360deg);
animation: rotation 1.4s linear infinite;
-moz-animation: rotation 1.4s linear infinite;
-webkit-animation: rotation 1.4s linear infinite;
-o-animation: rotation 1.4s linear infinite;
}
html code
<div style='60px'>
<img v-if='audioPlayStatus==true' class="img-rotate" src="https://xxxx.com/audio_start_play.png" style="width: 100%" />
</div>
版权声明
由 durban创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 博客( https://www.gowhich.com ),版权所有,侵权必究。
版权声明
由 durban创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 Gowhich博客( https://www.gowhich.com ),版权所有,侵权必究。