这篇文章主要介绍了html5实现图片转圈的动画效果——让页面动起来的相关资料,需要的朋友可以参考下

1.先瞧瞧效果：

2.代码是这样的：

@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;

}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何使用jQuery和HTML5实现手机摇一摇的换衣特效

如何利用canvas实现按住鼠标移动绘制出轨迹

用HTML5

Canvas来绘制三角形和矩形等多边形的方法