html5让图片转圈的动画效果的实现方法介绍
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让图片转圈的动画效果的实现方法介绍的详细内容,更多请关注jquery中文网其它相关文章!
-->您可能感兴趣的文章:
html5让图片转圈的动画效果的实现方法介绍
html5如何实现图片转圈的动画效果
HTML5 canvas实现中奖转盘的实例代码
在HTML5 Canvas中放入图片和保存为图片的方法
html5和js绘制图片到canvas的方法
如何使用canvas画一个圆?用canvas画圆的三种动态实现方法
用HTML5制作屏幕手势解锁功能
关于html5 canvas 微信海报的分享介绍
canvas实现九宫格心形拼图的方法(附代码)
在canvas上实现元素图片镜像翻转动画效果的方法