animation动画兼容所有手机
.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动画兼容所有手机的更多相关文章
- 手机uc不支持伪元素使用animation动画;移动端background-attachment:fixed不兼容性
20170503 1.手机uc不支持伪元素使用animation动画 (暂未解决) 2.移动端background-attachment:fixed不兼容性,没有任何效果, element:befor ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画
---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...
- 自定义微信小程序导航(兼容各种手机)
详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPh ...
- CSS3 animation 动画
今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- Android Property Animation动画
3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...
- android Animation 动画绘制逻辑
参考:http://www.jianshu.com/p/3683a69c38ea 1.View.draw(Canvas) 其中步骤为:/* * Draw traversal performs seve ...
- 转 iOS Core Animation 动画 入门学习(一)基础
iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Coco ...
随机推荐
- Unity3d 枚举某个目录下所有资源
using UnityEngine; using System.Collections; using UnityEditor; using System.Collections.Generic; us ...
- selenium 配合sikuli script操作高德地图
会不会使用工具,是一般QA和高级QA的区别 ---To be crazy Java就是好,开源框架遍地都是,各种niubility的jar包,各种神器,真是不亦乐乎. 今天研究一下基于图片识别作为对象 ...
- Effective C++ -----条款04:确定对象被使用前已被初始化
为内置型对象进行手工初始化,因为C++不保证初始化它们. 构造函数最好使用成员初值列,而不要在构造函数本体内使用赋值操作.初值列列出的成员变量,其排列次序应该和它们在class中的声明次序相同. 为免 ...
- HDU 1823 Luck and Love(二维线段树)
之前只知道这个东西的大概概念,没具体去写,最近呵呵,今补上. 二维线段树 -- 点更段查 #include <cstdio> #include <cstring> #inclu ...
- 【python】datetime获取日期,前一天日期
1.获取字符串型当前日期 2016-10-09格式 import datetime today = datetime.date.today() #datetime.date类型当前日期 str_tod ...
- [Android Pro] Android API 23中废弃了HttpClient的解决办法
reference to : http://blog.csdn.net/hbwindy/article/details/51326019 reference to : http://blog.csdn ...
- Google140道面试题
FQ找来,可能历史比较悠久了,慢慢看. 原文连接:http://www.impactinterview.com/2009/10/140-google-interview-questions/ Goog ...
- 分布式缓存系统Memcached简介与实践
缘起: 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够灵 ...
- ArrayList 和 LinkedList 的区别
1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构.2.对于随机访问get和set,ArrayList优于LinkedList,因为LinkedList要移动 ...
- Orleans是什么 (一)
官网:http://dotnet.github.io/orleans/ 文档:http://dotnet.github.io/orleans/What's-new-in-Orleans 源码:http ...