这篇文件介绍的动画是QQ邮箱APP里的加载动画，效果类似，但是不完全一样。实现过程不复杂，这里不详细解释了，直接上源码。另外还有一种实现方式，利用元素的3D转换加平移。
1. 先看截图
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>