.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. Unity3d 换装Avatar系统

    原理就是用新造的部件和角色的骨骼进行重新对接. demo的使用方法: PartIdx设置要换那个部件[0,4],一共5个部件 EquipIdx设置要更换部件的装备索引[0,1],具体看我的Change ...

  2. lists删除

    List<Map<String, Object>> trackList = bizFollowRepo.findList("trackFindPageList&quo ...

  3. 使用eclipse开发的兼容性配置

    通常使用eclipse开发程序的时候,正常情况下放到Linux中运行一般是没有什么问题,最明显的就是编码问题,这个一般都会统一为utf-8,另外还有Windows和Linux的换行符不同的原因,还有当 ...

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

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

  5. ajax提交表单

    $.ajax({ type: "POST", url: action, data: $('#checkout-form').serialize(), success: functi ...

  6. C/S love自编程序

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  7. 20145213《Java程序设计》第三周学习总结

    20145213<Java程序设计>第三周学习总结 教材学习内容总结 正所谓距离产生美,上周我还倾心于Java表面的基础语法.其简单的流程结构,屈指可数的基本类型分类,早已烂熟于心的运算符 ...

  8. Hibernate 所有缓存机制详解

    hibernate提供的一级缓存 hibernate是一个线程对应一个session,一个线程可以看成一个用户.也就是说session级缓存(一级缓存)只能给一个线程用,别的线程用不了,一级缓存就是和 ...

  9. SQL基本CRUD

    --已知Oracle的Scott用户中提供了三个测试数据库表 --名称分别为dept,emp,salgrade.使用SQL语言完成一下操作 --1,查询20号部门的所有员工信息: SELECT * F ...

  10. iphone删除自动更新的系统

    1.利用 etc/host 文件屏蔽 Apple 更新服务器用电脑 iTools 或者手机 iFile 打开 etc/host 文件,添加:127.0.0.1 mesu.apple.com到文件中.2 ...