css3如何让div一直循环自转圈,附带:网络请求通知图片一直在转圈实例
css3如何让div一直循环自转圈
代码如下:
div{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite;
-o-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}
效果如下:
以上效果图,是一个《网络请求通知》实例,一直在转圈的实例,实例代码如下:
《网络请求通知图片一直在转圈实例》
CSS:
/*网络请求通知*/
.web_request{
position: fixed;
z-index:;
top:0px;
left:0px;
width:100%;
height:100%;
}
.web_request_body{
width:40px;
height:40px;
margin:0 auto;
margin-top:10%;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 1.5s linear infinite;
-moz-animation: rotate 1.5s linear infinite;
-o-animation: rotate 1.5s linear infinite;
animation: rotate 1.5s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}
.web_request_body_background{
position: absolute;
width:40px;
height:40px;
background:#000;
opacity:0.2;
border-radius:50%;
}
.web_request_body_icon{
position: absolute;
}
.web_request_body_icon img{
margin-top:5px;
margin-left:5px;
width:30px;
height:30px;
}
HTML:
<!--网络请求通知-->
<div class="web_request">
<div class="web_request_body">
<div class="web_request_body_background"></div>
<div class="web_request_body_icon"><img src="/cai_img/fot_bz.png" /></div>
</div>
</div>
css3如何让div一直循环自转圈,附带:网络请求通知图片一直在转圈实例的更多相关文章
- CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- CSS3 实现六边形Div图片展示效果
原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...
- css3 transform 旋转div
css3 transform 旋转div 学习了:http://www.w3school.com.cn/cssref/pr_transform.asp
- 【转】Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址
Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址 关注finddreams,一起分享,一起进步: http://blog.csdn.net/finddr ...
- 循环神经网络与LSTM网络
循环神经网络与LSTM网络 循环神经网络RNN 循环神经网络广泛地应用在序列数据上面,如自然语言,语音和其他的序列数据上.序列数据是有很强的次序关系,比如自然语言.通过深度学习关于序列数据的算法要比两 ...
- wait()方法写在while循环中可以在线程接到通知后再一次判断条件
wait()方法写在while循环中可以在线程接到通知后再一次判断条件 synchronized public String pop() { String returnValue = "&q ...
- css3实现一个div设置多张背景图片及background-image属性
CSS3/CSS1 background-image 属性 语法: background-image:<bg-image> [ , <bg-image> ]* <bg-i ...
- css3实现左右div高度自适应且内容居中对齐
主要运用了css3的弹层布局,直接上代码: 效果:左边盒子宽度固定.内容居中对齐.与右侧盒子高度相等,右侧自动缩放 html: <div class="main"> & ...
- 用jquery或js实现三个div自动循环轮播
//3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){ index = (inde ...
随机推荐
- ios开发之多线程---GCD
一:基本概念 1:进程:正在运行的程序为进程. 2:线程:每个进程要想执行任务必须得有线程,进程中任务的执行都是在线程中. 3:线程的串行:一条线程里任务的执行都是串行的,假如有一个进程开辟了一条线程 ...
- ArcGIS 帮助文件中的CAD数据的说明
专业库——地理数据类型——cad
- 360随身WIFI作USB无线网卡的做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 1. 到控制面板上把360wifi卸载. 2. 到雷凌的官网下载网卡驱动,注意选择USB(RT2870***),操作系 ...
- 1069. The Black Hole of Numbers (20)【模拟】——PAT (Advanced Level) Practise
题目信息 1069. The Black Hole of Numbers (20) 时间限制100 ms 内存限制65536 kB 代码长度限制16000 B For any 4-digit inte ...
- Qt 静态函数QMetaObject::connectSlotsByName(QObject * object)
看别人代码看到void on_MyWidget_slotTest(); 就郁闷了,没看到他代码里有connect 却能把信号和槽可以连接起来. 今日回顾书本发现该函所的nb之处. QMetaObjec ...
- php实现 明明的随机数
php实现 明明的随机数 一.总结 一句话总结: 1.asort是干嘛的? asort — 对数组进行排序并保持索引关系 2.从控制台取数据怎么取? trim(fgets(STDIN)) 3.多组测试 ...
- python3 numpy API练习代码
# -*- coding: utf-8 -*- import numpy as np; a=np.array([1,2,3,4,5,6]); print("数组是:",a) #数组 ...
- erlang浅谈
优点: 1.面向并发,有成熟而且久经考验的框架可供使用,网络部分已经经过了良好封装 2.内存缓存解决方案进程字典,前者的读写速度是50NS-100Ns级别的 3.对二进制数据解析的语法是直观,简单,强 ...
- 关于在方法里面使用泛型public static <T> T
对泛型的理解一直处于模糊的状态,所以今天就专门看了看泛型,看到了如下的一段代码,网上没有找到相应的解释. 然后尝试着自己理解了一下,第一次写博客,手比较生. 现在就开始来写我的理解. 看到这个方法的第 ...
- shell配置java环境变量和批处理配置环境变量
linux配置java环境只需在/etc/profile中添加以下 前提是把jdk解压到/usr/local路径,当然路径可以随便改 export JAVA_HOME=/usr/local/jdk1. ...