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一直循环自转圈,附带:网络请求通知图片一直在转圈实例的更多相关文章

  1. CSS3圆圈动画放大缩小循环动画效果

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  3. css3 transform 旋转div

    css3 transform 旋转div 学习了:http://www.w3school.com.cn/cssref/pr_transform.asp

  4. 【转】Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址

    Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址 关注finddreams,一起分享,一起进步: http://blog.csdn.net/finddr ...

  5. 循环神经网络与LSTM网络

    循环神经网络与LSTM网络 循环神经网络RNN 循环神经网络广泛地应用在序列数据上面,如自然语言,语音和其他的序列数据上.序列数据是有很强的次序关系,比如自然语言.通过深度学习关于序列数据的算法要比两 ...

  6. wait()方法写在while循环中可以在线程接到通知后再一次判断条件

    wait()方法写在while循环中可以在线程接到通知后再一次判断条件 synchronized public String pop() { String returnValue = "&q ...

  7. css3实现一个div设置多张背景图片及background-image属性

    CSS3/CSS1 background-image 属性 语法: background-image:<bg-image> [ , <bg-image> ]* <bg-i ...

  8. css3实现左右div高度自适应且内容居中对齐

    主要运用了css3的弹层布局,直接上代码: 效果:左边盒子宽度固定.内容居中对齐.与右侧盒子高度相等,右侧自动缩放 html: <div class="main"> & ...

  9. 用jquery或js实现三个div自动循环轮播

    //3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){     index = (inde ...

随机推荐

  1. ios开发之多线程---GCD

    一:基本概念 1:进程:正在运行的程序为进程. 2:线程:每个进程要想执行任务必须得有线程,进程中任务的执行都是在线程中. 3:线程的串行:一条线程里任务的执行都是串行的,假如有一个进程开辟了一条线程 ...

  2. ArcGIS 帮助文件中的CAD数据的说明

    专业库——地理数据类型——cad

  3. 360随身WIFI作USB无线网卡的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 1. 到控制面板上把360wifi卸载. 2. 到雷凌的官网下载网卡驱动,注意选择USB(RT2870***),操作系 ...

  4. 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 ...

  5. Qt 静态函数QMetaObject::connectSlotsByName(QObject * object)

    看别人代码看到void on_MyWidget_slotTest(); 就郁闷了,没看到他代码里有connect 却能把信号和槽可以连接起来. 今日回顾书本发现该函所的nb之处. QMetaObjec ...

  6. php实现 明明的随机数

    php实现 明明的随机数 一.总结 一句话总结: 1.asort是干嘛的? asort — 对数组进行排序并保持索引关系 2.从控制台取数据怎么取? trim(fgets(STDIN)) 3.多组测试 ...

  7. python3 numpy API练习代码

    # -*- coding: utf-8 -*- import numpy as np; a=np.array([1,2,3,4,5,6]); print("数组是:",a) #数组 ...

  8. erlang浅谈

    优点: 1.面向并发,有成熟而且久经考验的框架可供使用,网络部分已经经过了良好封装 2.内存缓存解决方案进程字典,前者的读写速度是50NS-100Ns级别的 3.对二进制数据解析的语法是直观,简单,强 ...

  9. 关于在方法里面使用泛型public static <T> T

    对泛型的理解一直处于模糊的状态,所以今天就专门看了看泛型,看到了如下的一段代码,网上没有找到相应的解释. 然后尝试着自己理解了一下,第一次写博客,手比较生. 现在就开始来写我的理解. 看到这个方法的第 ...

  10. shell配置java环境变量和批处理配置环境变量

    linux配置java环境只需在/etc/profile中添加以下 前提是把jdk解压到/usr/local路径,当然路径可以随便改 export JAVA_HOME=/usr/local/jdk1. ...