蓝色扁平化CSS3 loading加载动画特效

蓝色扁平化CSS3 loading加载动画特效

这是一款css3属性制作loading加载动画,实用的加载图标动画特效。

使用方法
在页面引入以下HTML结构文件

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<section>
  <div class='sk-rotating-plane'></div>
</section>
<!-- / 2 -->
<section>
  <div class='sk-double-bounce'>
    <div class='sk-child sk-double-bounce-1'></div>
    <div class='sk-child sk-double-bounce-2'></div>
  </div>
</section>
<!-- / 3 -->
<section>
  <div class='sk-wave'>
    <div class='sk-rect sk-rect-1'></div>
    <div class='sk-rect sk-rect-2'></div>
    <div class='sk-rect sk-rect-3'></div>
    <div class='sk-rect sk-rect-4'></div>
    <div class='sk-rect sk-rect-5'></div>
  </div>
</section>
<!-- / 4 -->
<section>
  <div class='sk-wandering-cubes'>
    <div class='sk-cube sk-cube-1'></div>
    <div class='sk-cube sk-cube-2'></div>
  </div>
</section>
<!-- / 5 -->
<section>
  <div class='sk-spinner sk-spinner-pulse'></div>
</section>
<!-- / 6 -->
<section>
  <div class='sk-chasing-dots'>
    <div class='sk-child sk-dot-1'></div>
    <div class='sk-child sk-dot-2'></div>
  </div>
</section>
<!-- / 7 -->
<section>
  <div class='sk-three-bounce'>
    <div class='sk-bounce-1 sk-child'></div>
    <div class='sk-bounce-2 sk-child'></div>
    <div class='sk-bounce-3 sk-child'></div>
  </div>
</section>
<!-- / 8 -->
<section>
  <div class='sk-circle-bounce'>
    <div class='sk-child sk-circle-1'></div>
    <div class='sk-child sk-circle-2'></div>
    <div class='sk-child sk-circle-3'></div>
    <div class='sk-child sk-circle-4'></div>
    <div class='sk-child sk-circle-5'></div>
    <div class='sk-child sk-circle-6'></div>
    <div class='sk-child sk-circle-7'></div>
    <div class='sk-child sk-circle-8'></div>
    <div class='sk-child sk-circle-9'></div>
    <div class='sk-child sk-circle-10'></div>
    <div class='sk-child sk-circle-11'></div>
    <div class='sk-child sk-circle-12'></div>
  </div>
</section>
<!-- / 9 -->
<section>
  <div class='sk-cube-grid'>
    <div class='sk-cube sk-cube-1'></div>
    <div class='sk-cube sk-cube-2'></div>
    <div class='sk-cube sk-cube-3'></div>
    <div class='sk-cube sk-cube-4'></div>
    <div class='sk-cube sk-cube-5'></div>
    <div class='sk-cube sk-cube-6'></div>
    <div class='sk-cube sk-cube-7'></div>
    <div class='sk-cube sk-cube-8'></div>
    <div class='sk-cube sk-cube-9'></div>
  </div>
</section>
<!-- / 10 -->
<section>
  <div class='sk-fading-circle'>
    <div class='sk-circle sk-circle-1'></div>
    <div class='sk-circle sk-circle-2'></div>
    <div class='sk-circle sk-circle-3'></div>
    <div class='sk-circle sk-circle-4'></div>
    <div class='sk-circle sk-circle-5'></div>
    <div class='sk-circle sk-circle-6'></div>
    <div class='sk-circle sk-circle-7'></div>
    <div class='sk-circle sk-circle-8'></div>
    <div class='sk-circle sk-circle-9'></div>
    <div class='sk-circle sk-circle-10'></div>
    <div class='sk-circle sk-circle-11'></div>
    <div class='sk-circle sk-circle-12'></div>
  </div>
</section>
<!-- / 11 -->
<section>
  <div class='sk-folding-cube'>
    <div class='sk-cube sk-cube-1'></div>
    <div class='sk-cube sk-cube-2'></div>
    <div class='sk-cube sk-cube-4'></div>
    <div class='sk-cube sk-cube-3'></div>
  </div>
</section>
<section></section>

文件信息:

    2

    发表评论