css3实现无限旋转360度

工作中遇到需要无限旋转360度的loading圈，亲测下面css样式可用。

@-webkit-keyframes animal {0%{transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);}100%{transform: rotate(-360deg);-ms-transform: rotate(-360deg);-webkit-transform: rotate(-360deg);}
}

.icon {-webkit-animation: animal 1s infinite linear ;-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;
}

css3实现无限旋转360度相关推荐

css3实现头像旋转360度
css样式: .div a img{ width: 88px; height: 88px; border-radius: 88px; transition: all 1.2s ease-out 0s; ...
C# 图片旋转360度程序
这几天开发一个程序,需要将一个图片旋转360度然后每一个角度保存下来.刚开始本来想着是让美工弄的,但是让一个美工手动转360度,她会喷你一脸. using System; using System.C ...
鼠标画上去图片旋转360度
**鼠标画上去图片旋转360度** <!DOCTYPE html> <html lang="en"> <head><meta charse ...
鼠标经过变大1.2倍、旋转360度并改变背景色。
鼠标经过变大1.2倍.旋转360度并改变背景色. HTML代码部分 <div class="demo_box demo_rotate">鼠标经过变大1.2倍.旋转360 ...
css3动画旋转360度,CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例...
CSS3旋转动画(360度旋转.旋转放大.放大.移动) 用法和实例 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explo ...
Animation旋转360度
最开始的想法是让旋转的弧度从0到2 * M_PI, 让动画不停的repeat,实验了一下,没有任何效果,系统动画的时候看到0与2 *M_PI是同一起一始点,所以没有效果. 后来想到一种办法,就是一个 ...
地图绕当前视点的中心点旋转360度的实现
本文主要介绍实现地图绕当前视点中心旋转一周的实现,由于计算方法全部自己封装,不依赖平台API,所以完全可以应用到其他语言,只要按照对应的语法规则更改即可. 先看下效果图: 本来想的是用arcgisap ...
css3动画旋转360度,CSS3动画（360度旋转、旋转放大、放大、移动）
Title div{ width:120px; height:120px; line-height:120px; margin: 20px; background-color: #5cb85c; fl ...
css3 图片旋转360度动画
html <div class="n_animation_picture"><img class="n_picture_adm" src=&q ...

css3实现无限旋转360度

css3实现无限旋转360度相关推荐

最新文章

热门文章