3款漂亮的CSS3 Loading動畫實例教程

  　　HTML
第1個例子中的HTML標記非常簡單，我們在頁面上創建了一個ul列表標記，並在其內部創建了幾個div來控制它的總體進度動畫，代碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 <ul id="progress">
    <li>
    <div id="layer1" class="ball"></div> <!-- layer1 control delay animation / ball is effect -->
    <div id="layer7" class="pulse"></div> <!-- layer7 control delay animation / pulse is effect  -->
    </li>
    <li>
    <div id="layer2" class="ball"></div>
    <div id="layer8" class="pulse"></div>
    </li>
    <li>
    <div id="layer3" class="ball"></div>
    <div id="layer9" class="pulse"></div>
    </li>
    <li>
    <div id="layer4" class="ball"></div>
    <div id="layer10" class="pulse"></div>
    </li>
    <li>
    <div id="layer5" class="ball"></div>
    <div id="layer11" class="pulse"></div>
    </li>
</ul>

CSS 沒有什麼不同的，我們僅僅為ul標記創建了圖形動畫，請注意中間過程中的特別的動畫效果，這個效果要歸功於CSS3的延遲動畫特性，CSS代碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89 ul#progress {
    list-style:none;
    width:125px;
    margin:0 auto;
    padding-top:50px;
    padding-bottom:50px;
}
 
ul#progress li { /* Style your list */
    float:left;
    position:relative;
    width:15px;
    height:15px;
    border:1px solid #fff;
    border-radius:50px;
    margin-left:10px;
    border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
    background:#000;
}
 
ul#progress li:first-child { margin-left:0; } /* Remove the margin first li element */
 
.ball { /* Style your ball and set the animation */
    background-color:#2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
 
    width:15px;
    height:15px;
    border-radius:50px;
    -moz-transform:scale(0);
    -webkit-transform:scale(0);
    
    -moz-animation:loading 1s linear forwards;
    -webkit-animation:loading 1s linear forwards;
}
 
.pulse { /* Style your second ball to create the amazing effects */
    width:15px;
    height:15px;
    border-radius:30px;
    border: 1px solid #00c6ff;
    box-shadow: 0 0 5px #00c6ff;
    position:absolute;
    top:-1px;
    left:-1px;
    -moz-transform:scale(0);
    -webkit-transform:scale(0);
    
    -webkit-animation:pulse 1s ease-out;
    -moz-animation:pulse 1s ease-out;
}
 
/* Control Layers */
#layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }