码迷,mamicode.com
首页 > Web开发 > 详细

CSS 实现加载动画之八-圆点旋转

时间:2014-10-13 20:40:47      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   ar   for   

这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样。实现过程不复杂,这里不详细解释了,直接上源码。另外还有一种实现方式,利用元素的3D转换加平移。

 

1. 先看截图

bubuko.com,布布扣

 

2. 源代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
 5 <title>CSS3实现加载的动画效果8</title>
 6 <meta name="author" content="rainna" />
 7 <meta name="keywords" content="rainna‘s css lib" />
 8 <meta name="description" content="CSS3" />
 9 <style>
10 *{margin:0;padding:0;}
11 body{background:#f0f0f0;}
12 .m-load{height:280px;background:url(‘load.png‘) center top no-repeat;}
13 
14 /** 加载动画的静态样式 **/
15 .m-load2{position:relative;width:60px;height:20px;margin:100px auto;}
16 .m-load2:before,.m-load2:after,.m-load2 .item{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:10px;}
17 .m-load2:before{content:‘‘;background:#ABF509;}
18 .m-load2:after{content:‘‘;background:#FDD308;}
19 .m-load2 .item{background:#f2574b;}
20 /** 加载动画 **/
21 @-webkit-keyframes load{
22     0%{z-index:1;}
23     25%{-webkit-transform:translateX(20px) scale(1.3);}
24     50%{-webkit-transform:translateX(40px);}
25     75%{-webkit-transform:translateX(20px);}
26 }
27 .m-load2:before{-webkit-animation:load 1.2s linear infinite;}
28 .m-load2 .item{-webkit-animation:load 1.2s linear 0.3s infinite;}
29 .m-load2:after{-webkit-animation:load 1.2s linear 0.6s infinite;}
30 </style>
31 </head>
32 
33 <body>
34 <div class="m-load"></div>
35 
36 <div class="m-load2">
37     <div class="item"></div>
38 </div>
39 </body>
40 </html>

 

CSS 实现加载动画之八-圆点旋转

标签:des   style   blog   http   color   io   os   ar   for   

原文地址:http://www.cnblogs.com/zourong/p/4022729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!