CSS3实现大小不一的粒子旋转加载动画

先看看效果图，像是气泡在上升：

1. #load3,     
2. #loader3 {     
3.  font-size: 20px;     
4.  margin: 80px 50px;     
5.  float: left;     
6.  width: 1em;     
7.  height: 1em;     
8.  border-radius: 50%;     
9.  position: relative;     
10.  text-indent: -9999em;     
11.  -webkit-animation: load3 1.3s infinite linear;     
12.  animation: load3 1.3s infinite linear;     
13. }     
14. @-webkit-keyframes load3 {     
15.    0%,     
16.    100% {     
17.      box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,     
18.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
19.                  0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
20.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;     
21.    }     
22.    12.5% {     
23.      box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,     
24.                  3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,     
25.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
26.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
27.    }     
28.    25% {     
29.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,     
30.                   3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,     
31.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
32.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
33.    }     
34.    37.5% {     
35.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
36.                    3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,     
37.                    0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,     
38.                    -3em 0 0 -0.5em&