使用CSS3实现超炫的Loading（加载）动画效果
SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）
Loading 动画效果一
HTML 代码：
|
1
2
3
4
5
6
7
|
<div class=
"spinner"
>
<div class=
"rect1"
></div>
<div class=
"rect2"
></div>
<div class=
"rect3"
></div>
<div class=
"rect4"
></div>
<div class=
"rect5"
></div>
</div>
|
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
|
.spinner {
margin
:
100px
auto
;
width
:
50px
;
height
:
60px
;
text-align
:
center
;
font-size
:
10px
;
}
.spinner > div {
background-color
:
#67CF22
;
height
:
100%
;
width
:
6px
;
display
: inline-
block
;
-webkit-animation: stretchdelay
1.2
s infinite ease-in-out;
animation: stretchdelay
1.2
s infinite ease-in-out;
}
.spinner .rect
2
{
-webkit-animation-delay:
-1.1
s;
animation-delay:
-1.1
s;
}
.spinner .rect
3
{
-webkit-animation-delay:
-1.0
s;
animation-delay:
-1.0
s;
}
.spinner .rect
4
{
-webkit-animation-delay:
-0.9
s;
animation-delay:
-0.9
s;
}
.spinner .rect
5
{
-webkit-animation-delay:
-0.8
s;
animation-delay:
-0.8
s;
}
@-webkit-keyframes stretchdelay {
0%
,
40%
,
100%
{ -webkit-transform: scaleY(
0.4
) }
20%
{ -webkit-transform: scaleY(
1.0
) }
}
@keyframes stretchdelay {
0%
,
40%
,
100%
{
transform: scaleY(
0.4
);
-webkit-transform: scaleY(
0.4
);
}
20%
{
transform: scaleY(
1.0
);
-webkit-transform: scaleY(
1.0
);
}
}
|
Loading 动画效果二
HTML 代码：
|
1
|
<div class=
"spinner"
></div>
|
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
|
.spinner {
width
:
60px
;
height
:
60px
;
background-color
:
#67CF22
;
margin
:
100px
auto
;
-webkit-animation: rotateplane
1.2
s infinite ease-in-out;
animation: rotateplane
1.2
s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0%
{ -webkit-transform: perspective(
120px
) }
50%
{ -webkit-transform: perspective(
120px
) rotateY(
180
deg) }
100%
{ -webkit-transform: perspective(
120px
) rotateY(
180
deg) rotateX(
180
deg) }
}
@keyframes rotateplane {
0%
{
transform: perspective(
120px
) rotateX(
0
deg) rotateY(
0
deg);
-webkit-transform: perspective(
120px
) rotateX(
0
deg) rotateY(
0
deg)
}
50%
{
transform: perspective(
120px
) rotateX(
-180.1
deg) rotateY(
0
deg);
-webkit-transform: perspective(
120px
) rotateX(
-180.1
deg) rotateY(
0
deg)
}
100%
{
transform: perspective(
120px
) rotateX(
-180
deg) rotateY(
-179.9
deg);
-webkit-transform: perspective(
120px
) rotateX(
-180
deg) rotateY(
-179.9
deg);
}
}
|
Loading 动画效果三
HTML 代码：
|
1
2
3
4
|
<div class=
"spinner"
>
<div class=
"double-bounce1"
></div>
<div class=
"double-bounce2"
></div>
</div>
|
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
|
.spinner {
width
:
60px
;
height
:
60px
;
position
:
relative
;
margin
:
100px
auto
;
}
.double-bounce
1
, .double-bounce
2
{
width
:
100%
;
height
:
100%
;
border-radius:
50%
;
background-color
:
#67CF22
;
opacity:
0.6
;
position
:
absolute
;
top
:
0
;
left
:
0
;
-webkit-animation: bounce
2.0
s infinite ease-in-out;
animation: bounce
2.0
s infinite ease-in-out;
}
.double-bounce
2
{
-webkit-animation-delay:
-1.0
s;
animation-delay:
-1.0
s;
}
@-webkit-keyframes bounce {
0%
,
100%
{ -webkit-transform: scale(
0.0
) }
50%
{ -webkit-transform: scale(
1.0
) }
}
@keyframes bounce {
0%
,
100%
{
transform: scale(
0.0
);
-webkit-transform: scale(
0.0
);
}
50%
{
transform: scale(
1.0
);
-webkit-transform: scale(
1.0
);
}
}
|
Loading 动画效果四
HTML 代码：
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
|
.spinner {
margin
:
100px
auto
;
width
:
32px
;
height
:
32px
;
position
:
relative
;
}
.cube
1
, .cube
2
{
background-color
:
#67CF22
;
width
:
30px
;
height
:
30px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
-webkit-animation: cubemove
1.8
s infinite ease-in-out;
animation: cubemove
1.8
s infinite ease-in-out;
}
.cube
2
{
-webkit-animation-delay:
-0.9
s;
animation-delay:
-0.9
s;
}
@-webkit-keyframes cubemove {
25%
{ -webkit-transform: translateX(
42px
) rotate(
-90
deg) scale(
0.5
) }
50%
{ -webkit-transform: translateX(
42px
) translateY(
42px
) rotate(
-180
deg) }
75%
{ -webkit-transform: translateX(
0px
) translateY(
42px
) rotate(
-270
deg) scale(
0.5
) }
100%
{ -webkit-transform: rotate(
-360
deg) }
}
@keyframes cubemove {
25%
{
transform: translateX(
42px
) rotate(
-90
deg) scale(
0.5
);
-webkit-transform: translateX(
42px
) rotate(
-90
deg) scale(
0.5
);
}
50%
{
transform: translateX(
42px
) translateY(
42px
) rotate(
-179
deg);
-webkit-transform: translateX(
42px
) translateY(
42px
) rotate(
-179
deg);
}
50.1%
{
transform: translateX(
42px
) translateY(
42px
) rotate(
-180
deg);
-webkit-transform: translateX(
42px
) translateY(
42px
) rotate(
-180
deg);
}
75%
{
transform: translateX(
0px
) translateY(
42px
) rotate(
-270
deg) scale(
0.5
);
-webkit-transform: translateX(
0px
) translateY(
42px
) rotate(
-270
deg) scale(
0.5
);
}
100%
{
transform: rotate(
-360
deg);
-webkit-transform: rotate(
-360
deg);
}
}
|
Loading 动画效果五
HTML 代码：
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
|
.spinner {
margin
:
100px
auto
;
width
:
90px
;
height
:
90px
;
position
:
relative
;
text-align
:
center
;
-webkit-animation: rotate
2.0
s infinite linear;
animation: rotate
2.0
s infinite linear;
}
.dot
1
, .dot
2
{
width
:
60%
;
height
:
60%
;
display
: inline-
block
;
position
:
absolute
;
top
:
0
;
background-color
:
#67CF22
;
border-radius:
100%
;
-webkit-animation: bounce
2.0
s infinite ease-in-out;
animation: bounce
2.0
s infinite ease-in-out;
}
.dot
2
{
top
:
auto
;
bottom
:
0px
;
-webkit-animation-delay:
-1.0
s;
animation-delay:
-1.0
s;
}
@-webkit-keyframes rotate {
100%
{ -webkit-transform: rotate(
360
deg) }}
@keyframes rotate {
100%
{ transform: rotate(
360
deg); -webkit-transform: rotate(
360
deg) }}
@-webkit-keyframes bounce {
0%
,
100%
{ -webkit-transform: scale(
0.0
) }
50%
{ -webkit-transform: scale(
1.0
) }
}
@keyframes bounce {
0%
,
100%
{
transform: scale(
0.0
);
-webkit-transform: scale(
0.0
);
}
50%
{
transform: scale(
1.0
);
-webkit-transform: scale(
1.0
);
}
}
|
Loading 动画效果六
HTML 代码：
|
1
2
3
4
5
|
<div class=
"spinner"
>
<div class=
"bounce1"
></div>
<div class=
"bounce2"
></div>
<div class=
"bounce3"
></div>
</div>
|
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
|
.spinner {
margin
:
100px
auto
0
;
width
:
150px
;
text-align
:
center
;
}
.spinner > div {
width
:
30px
;
height
:
30px
;
background-color
:
#67CF22
;
border-radius:
100%
;
display
: inline-
block
;
-webkit-animation: bouncedelay
1.4
s infinite ease-in-out;
animation: bouncedelay
1.4
s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode:
both
;
animation-fill-mode:
both
;
}
.spinner .bounce
1
{
-webkit-animation-delay:
-0.32
s;
animation-delay:
-0.32
s;
}
.spinner .bounce
2
{
-webkit-animation-delay:
-0.16
s;
animation-delay:
-0.16
s;
}
@-webkit-keyframes bouncedelay {
0%
,
80%
,
100%
{ -webkit-transform: scale(
0.0
) }
40%
{ -webkit-transform: scale(
1.0
) }
}
@keyframes bouncedelay {
0%
,
80%
,
100%
{
transform: scale(
0.0
);
-webkit-transform: scale(
0.0
);
}
40%
{
transform: scale(
1.0
);
-webkit-transform: scale(
1.0
);
}
}
|
Loading 动画效果七
HTML 代码：
|
1
|
<div class=
"spinner"
></div>
|
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
|
.spinner {
width
:
40px
;
height
:
40px
;
margin
:
100px
auto
;
background-color
:
#333
;
border-radius:
100%
;
-webkit-animation: scaleout
1.0
s infinite ease-in-out;
animation: scaleout
1.0
s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
0%
{ -webkit-transform: scale(
0.0
) }
100%
{
-webkit-transform: scale(
1.0
);
opacity:
0
;
}
}
@keyframes scaleout {
0%
{
transform: scale(
0.0
);
-webkit-transform: scale(
0.0
);
}
100%
{
transform: scale(
1.0
);
-webkit-transform: scale(
1.0
);
opacity:
0
;
}
}
|
Loading 动画效果八
HTML 代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<div class=
"spinner"
>
<div class=
"spinner-container container1"
>
<div class=
"circle1"
></div>
<div class=
"circle2"
></div>
<div class=
"circle3"
></div>
<div class=
"circle4"
></div>
</div>
<div class=
"spinner-container container2"
>
<div class=
"circle1"
></div>
<div class=
"circle2"
></div>
<div class=
"circle3"
></div>
<div class=
"circle4"
></div>
</div>
<div class=
"spinner-container container3"
>
<div class=
"circle1"
></div>
<div class=
"circle2"
></div>
<div class=
"circle3"
></div>
<div class=
"circle4"
></div>
</div>
</div>
|
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
.spinner {
margin
:
100px
auto
;
width
:
20px
;
height
:
20px
;
position
:
relative
;
}
.container
1
> div, .container
2
> div, .container
3
> div {
width
:
6px
;
height
:
6px
;
background-color
:
#333
;
border-radius:
100%
;
position
:
absolute
;
-webkit-animation: bouncedelay
1.2
s infinite ease-in-out;
animation: bouncedelay
1.2
s infinite ease-in-out;
-webkit-animation-fill-mode:
both
;
animation-fill-mode:
both
;
}
.spinner .spinner-container {
position
:
absolute
;
width
:
100%
;
height
:
100%
;
}
.container
2
{
-webkit-transform: rotateZ(
45
deg);
transform: rotateZ(
45
deg);
}
.container
3
{
-webkit-transform: rotateZ(
90
deg);
transform: rotateZ(
90
deg);
}
.circle
1
{
top
:
0
;
left
:
0
; }
.circle
2
{
top
:
0
;
right
:
0
; }
.circle
3
{
right
:
0
;
bottom
:
0
; }
.circle
4
{
left
:
0
;
bottom
:
0
; }
.container
2
.circle
1
{
-webkit-animation-delay:
-1.1
s;
animation-delay:
-1.1
s;
}
.container
3
.circle
1
{
-webkit-animation-delay:
-1.0
s;
animation-delay:
-1.0
s;
}
.container
1
.circle
2
{
-webkit-animation-delay:
-0.9
s;
animation-delay:
-0.9
s;
}
.container
2
.circle
2
{
-webkit-animation-delay:
-0.8
s;
animation-delay:
-0.8
s;
}
.container
3
.circle
2
{
-webkit-animation-delay:
-0.7
s;
animation-delay:
-0.7
s;
}
.container
1
.circle
3
{
-webkit-animation-delay:
-0.6
s;
animation-delay:
-0.6
s;
}
.container
2
.circle
3
{
-webkit-animation-delay:
-0.5
s;
animation-delay:
-0.5
s;
}
.container
3
.circle
3
{
-webkit-animation-delay:
-0.4
s;
animation-delay:
-0.4
s;
}
.container
1
.circle
4
{
-webkit-animation-delay:
-0.3
s;
animation-delay:
-0.3
s;
}
.container
2
.circle
4
{
-webkit-animation-delay:
-0.2
s;
animation-delay:
-0.2
s;
}
.container
3
.circle
4
{
-webkit-animation-delay:
-0.1
s;
animation-delay:
-0.1
s;
}
@-webkit-keyframes bouncedelay {
0%
,
80%
,
100%
{ -webkit-transform: scale(
0.0
) }
40%
{ -webkit-transform: scale(
1.0
) }
}
@keyframes bouncedelay {
0%
,
80%
,
100%
{
transform: scale(
0.0
);
-webkit-transform: scale(
0.0
);
}
40%
{
transform: scale(
1.0
);
-webkit-transform: scale(
1.0
);
}
}
|