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 ...
随机推荐
- 针对SYN洪水攻击的防御措施
可以运用sysctl命令进行配置,由于本命令参数较多,这里只简单记录几个比较常用的参数: 1.tcp_max_syn_backlog 这个参数指定了后备队列可维持的TCP半开连接的数目,如果该值设定很 ...
- log4j:WARN No appenders could be found for logger
直接写我的解决办法: 在src下面新建file名为log4j.properties内容如下:# Configure logging for testing: optionally with log f ...
- C# 操作IIS方法集合
如果在win8,win7情况下报错:未知错误(0x80005000) 见http://blog.csdn.net/ts1030746080/article/details/8741399 using ...
- ExpandableListView的用法
ExpandableListView组件是android中一个比较常用的组件,当点击一个父item的时候可以将它的子item显示出来,像手机QQ中的好友列表就是实现的类型效果.使用Expandable ...
- WinForm相关注意点
1. //this.dgvEmployees.ColumnHeadersDefaultCellStyle.ForeColor = Color.Blue; //dgvEmployees.RowHeade ...
- 在JAVA中如何跳出当前的多重嵌套循环
可以使用return,但使用return后,会跳出整个函数,多重循环后面的代码无法执行. public static void main(String[] args) { // TODO Auto-g ...
- 如何将.il、.res文件封装成dll文件
将你的.il..res文件保存在你的硬盘上,如下图: 我存放的路径在E盘的test文件夹中,我们开始封装了咯.进入DOS命令,如下图: 我们通过DOS命令先进入.il..res文件目录,如下图: 然后 ...
- UI课堂笔记
2016.7.18 + (UIColor *)blackColor; + (UIColor *)darkGrayColor; 深灰色 + (UIColor *)lightGrayColor; 浅 ...
- 字典树(codevs 4189)
4189 字典 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题解 查看运行结果 题目描述 Description 最经,skyzhong得到了 ...
- Mysql undo与redo Log
http://mysql.taobao.org/monthly/2015/04/01/ http://www.cnblogs.com/Bozh/archive/2013/03/18/2966494.h ...