这篇文章将为大家详细讲解有关如何在html5实现图片转圈的动画效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

1.先瞧瞧效果:

2.代码是这样的:

<img src="images/circle.png" alt="" id="circle"/>@mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{transform: rotateZ(360deg);} }}@include ani-btnRotate;#circle{ position: absolute; left: 50%; width: REM(338); height: REM(338); margin-top: REM(200); margin-left: REM(-338/2); transform-origin: center center ; animation: btnRotate 1s 1s linear forwards; }

用到的图片是这个:(就是白色转动的那个图片)

相信看了本文案例你已经掌握了方法,更多精彩请关注亿速云其它相关文章!

关于如何在html5实现图片转圈的动画效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。