使用 CSS3 實現超炫的 Loading（加載）動畫效果
SpinKit 是一套網頁動畫效果，包含8種基於 CSS3 實現的很炫的加載動畫。藉助 CSS3 Animation 的強大功能來建立平滑，易於定製的動畫。SpinKit 的目標不是提供一個每一個瀏覽器都兼容的解決方案，而是給現代瀏覽器提供更優的技術實現方案和更佳的使用體驗。（爲保證最佳的效果，請在 Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽）javascript
您可能感興趣的相關文章
Loading 動畫效果一php
HTML 代碼：css
|
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 代碼：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
|
.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 代碼：html5
|
1
|
<div
class
=
"spinner"
></div>
|
CSS 代碼：java
|
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 動畫效果三jquery
HTML 代碼：css3
|
1
2
3
4
|
<div
class
=
"spinner"
>
<div
class
=
"double-bounce1"
></div>
<div
class
=
"double-bounce2"
></div>
</div>
|
CSS 代碼：git
|
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 代碼：
|
1
2
3
4
|
<div class=
"spinner"
>
<div class=
"cube1"
></div>
<div class=
"cube2"
></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
|
.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 代碼：
|
1
2
3
4
|
<div class=
"spinner"
>
<div class=
"dot1"
></div>
<div class=
"dot2"
></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
|
.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
);
}
}
|
您可能感興趣的相關文章
- 24款很是實用的CSS3工具終極收藏
- 史上最全的瀏覽器 CSS & JS Hack 手冊
- 10套精美的免費網站後臺管理系統模板
- 讓你的網站變成響應式的3個簡單步驟
- 基於 Bootstrap 的響應式後臺管理模板
本文連接：分享8個使用 CSS3 實現的超炫的網頁加載動畫效果
編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
posted @
2013-12-28 15:17 夢想天空（山邊小溪） 閱讀(270771) 評論(47) 編輯 收藏