梦想天空
关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:)
使用 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 代码:
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 实现的超炫的网页加载动画效果
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
posted @
2013-12-28 15:17 梦想天空(山边小溪) 阅读(270771) 评论(47) 编辑 收藏
| |||||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
---|---|---|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 31 | 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 | |||
1 | 2 | 3 | 4 | 5 | 6 | 7 |