.canvasAnim{
position: absolute;
width:240px;
height:240px;
top:;
z-index:;
top:-20px;
left:-5px;
border-radius:120px;
background:-moz-linear-gradient(top, #198bc9, rgba(255, 255, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#198bc9), to(rgba(255,255,255, 0.5)));
background:-o-linear-gradient(top, #198bc9, rgba(255, 255, 255, 0.5));
animation: myfirst 1s infinite linear;
-webkit-animation:myfirst 1s infinite linear;
-o-animation:myfirst 1s infinite linear;
}
@keyframes myfirst{
0{
transform: rotate(0deg); /* for Chrome || Safari */
-moz-transform: rotate(0deg); /* for Firefox */
-o-transform: rotate(0deg); /* for Opera */
}
100%{
-webkit-transform: rotate(360deg); /* for Chrome || Safari */
-moz-transform: rotate(360deg); /* for Firefox */
-o-transform: rotate(360deg); /* for Opera */
}
}
@-webkit-keyframes myfirst{
0{
-webkit-transform: rotate(0deg); /* for Chrome || Safari */
-moz-transform: rotate(0deg); /* for Firefox */
-o-transform: rotate(0deg); /* for Opera */
}
100%{
-webkit-transform: rotate(360deg); /* for Chrome || Safari */
-moz-transform: rotate(360deg); /* for Firefox */
-o-transform: rotate(360deg); /* for Opera */
}
}
@-o-keyframes myfirst{
0{
-webkit-transform: rotate(0deg); /* for Chrome || Safari */
-moz-transform: rotate(0deg); /* for Firefox */
-o-transform: rotate(0deg); /* for Opera */
}
100%{
-webkit-transform: rotate(360deg); /* for Chrome || Safari */
-moz-transform: rotate(360deg); /* for Firefox */
-o-transform: rotate(360deg); /* for Opera */
}
}

animation动画兼容所有手机的更多相关文章

  1. 手机uc不支持伪元素使用animation动画;移动端background-attachment:fixed不兼容性

    20170503 1.手机uc不支持伪元素使用animation动画 (暂未解决) 2.移动端background-attachment:fixed不兼容性,没有任何效果, element:befor ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

    ---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...

  4. 自定义微信小程序导航(兼容各种手机)

    详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPh ...

  5. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  6. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  7. Android Property Animation动画

    3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...

  8. android Animation 动画绘制逻辑

    参考:http://www.jianshu.com/p/3683a69c38ea 1.View.draw(Canvas) 其中步骤为:/* * Draw traversal performs seve ...

  9. 转 iOS Core Animation 动画 入门学习(一)基础

    iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Coco ...

随机推荐

  1. Portal

    https://chenliang0571.wordpress.com/2013/12/08/openwrt-wifidog-wifi-hotspots/http://www.h3c.com.cn/M ...

  2. Calendar类测试

    public static void main(String[] args) throws ParseException { // 字符串转换日期格式 // DateFormat fmtDateTim ...

  3. 使用logrotate管理nginx日志文件

    本文转载自:http://linux008.blog.51cto.com/2837805/555829 描述:linux日志文件如果不定期清理,会填满整个磁盘.这样会很危险,因此日志管理是系统管理员日 ...

  4. Effective C++ -----条款09:绝不在构造和析构过程中调用virtual函数

    在构造和析构期间不要调用virtual函数,因为这类调用从不下降至derived class(比起当前执行构造函数和析构函数的那层).

  5. 零件分组_DP

    问题 C: 零件分组 时间限制: 1 Sec  内存限制: 64 MB提交: 31  解决: 14[提交][状态][讨论版] 题目描述 某工厂生产一批棍状零件,每个零件都有一定的长度(Li)和重量(W ...

  6. css 优先级 机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...

  7. WCF服务与WCF数据服务的区别

    问: Hi, I am newbie to wcf programming and a little bit confused between WCF Service and WCF Data  Se ...

  8. POJ 3597 Polygon Division (DP)

    题目链接 题意:把一个正多边形分成数个三角形或者四边形,问有多少种方案. 题解: 如果分出的全为三角形的话,那就是正多边形三角剖分问题.它的结果就是Catalan数.现在也可以划分出四边形的话,可以采 ...

  9. HDU 4314 Save the dwarfs (DP) ---转载

    题目:传送门. 这个是DP,比赛的时候用贪心写了好久没写出来. 题意: 有n个矮人被困在深度为h的井中,每个矮人都ai(脚到肩膀的高度)和bi(手臂长度), 当存在a1 + a2 + ... + ak ...

  10. IOS - delegate为什么不使用retain

    循环引用所有的引用计数系统,都存在循环应用的问题.例如下面的引用关系: 对象a创建并引用了对象b.对象b创建并引用了对象c.对象c创建并引用了对象b. 这时候b和c的引用计数分别是2和1.当a不再使用 ...