一个css3的loading、闪烁效果。

html代码：

 1  <div class="step-act-icon">
 2     <div class="ripple ripple1">
 3      </div>
 4     <div class="ripple ripple2">
 5      </div>
 6     <div class="ripple ripple3">
 7       </div>
 8     <div class="ripple ripple4">
 9     </div>
10 </div>

css代码：

 1 .step-act-icon {
 2         position: absolute;
 3         left: 0;
 4         top: 50%;
 5         margin-top: -11px;
 6         width: 22px;
 7         height: 22px;
 8         border-radius: 50%;
 9         .ripple {
10           position: absolute;
11           left: 0;
12           top: 50%;
13           margin-top: -11px;
14           width: 100%;
15           height: 100%;
16           border-radius: 50%;
17           animation: ripple 1s ease-in-out alternate-reverse infinite;
18           transform: scale(0);
19           opacity: 0.6;
20         }
21       }
22       .step-act-icon .ripple1 {
23         background: #92EF69;
24       }
25 
26       .step-act-icon .ripple2 {
27         animation-delay: -250ms;
28         background: #71DE41;
29       }
30 
31       .step-act-icon .ripple3 {
32         animation-delay: -500ms;
33         background: #64C639;
34       }
35       .step-act-icon .ripple4 {
36         animation-delay: -750ms;
37         background: #3E9C14;
38       }