.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. git diff获取差异文件中文乱码的解决办法

    通过git的diff命令对两个commit id的版本进行差异化的对比.中文文件时出现乱码. git diff 6bded8d0c1fe1746c122121217dc0c88667091089 a9 ...

  2. FastReport调用Delphi中的人民币大写转换自定义函数

    FastReport调用Delphi中的人民币大写转换自定义函数   FastReport调用Delphi中的人民币大写转换自定义函数 function TJzpzEdit1.MoneyCn(mmje ...

  3. ACM/ICPC 之 BFS-广搜+队列入门-抓牛(POJ3278)

    这一题是练习广度优先搜索很好的例题,在很多广搜教学中经常用到,放在这里供学习搜索算法的孩纸们看看= = 题目大意:一维数轴上,农夫在N点,牛在K点,假定牛不会移动,农夫要找到这头牛只能够进行以下三种移 ...

  4. 8.js模式-状态模式

    1. 状态模式 var offLightState = function(light){ this.light = light; } offLightState.prototype.buttonWas ...

  5. Effective C++ -----条款23:宁以non-member、non-friend替换member函数

    宁可拿non-member non-friend函数替换member函数.这样做可以增加封装性.包裹弹性(packaging flexibility)和机能扩充性.

  6. 打开Genesis设置单位为mm

    打开Genesis界面: 点击Configuration: 可看到只要设置get_def_units的值即可: 打开C:\genesis\sys\config配置文件,在最后一行加入:get_def_ ...

  7. Mysql手册—SQLStatementSyntax

    14.1.1 ALTER DATABASE Syntax,可用于修改数据库字符集和校验规则 查看校验规则可如下: 由于utf8的校验规则都是ci(case insensitive),所以是不区分大小写 ...

  8. FragmentHelper

    package com.icitymobile.anda.util; import java.lang.ref.SoftReference; import java.util.ArrayList; i ...

  9. 设计模式学习之代理模式(Proxy,结构型模式)(11)

    参考地址:http://www.cnblogs.com/zhili/p/ProxyPattern.html 一.引言 在软件开发过程中,有些对象有时候会由于网络或其他的障碍,以至于不能够或者不能直接访 ...

  10. 无废话ExtJs 入门教程十五[员工信息表Demo:AddUser]

    无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...