当前位置：
首页 > 工作范文 > 行政公文 > 使用CSS3实现超炫的Loading加载动画效果.docx
使用CSS3实现超炫的Loading加载动画效果.docx
- 文档编号：23626504
- 上传时间：2023-05-19
- 格式：DOCX
- 页数：17
- 大小：58.75KB
使用CSS3实现超炫的Loading加载动画效果.docx
《使用CSS3实现超炫的Loading加载动画效果.docx》由会员分享，可在线阅读，更多相关《使用CSS3实现超炫的Loading加载动画效果.docx（17页珍藏版）》请在冰豆网上搜索。
使用CSS3实现超炫的Loading加载动画效果
使用-CSS3-实现超炫的-Loading（加载）动画效果
使用CSS3实现超炫的Loading（加载）动画效果
SpinKit是一套网页动画效果，包含8种基于CSS3实现的很炫的加载动画。
借助CSS3Animation的强大功能来创建平滑，易于定制的动画。
SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。
（为保证最佳的效果，请在Chrome、Firefox和Safari等现代浏览器中浏览）
Loading动画效果一
HTML代码：
1
2
3
4
5
6
7
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:
100pxauto;
width:
50px;
height:
60px;
text-align:
center;
font-size:
10px;
}
.spinner>div{
background-color:
#67CF22;
height:
100%;
width:
6px;
display:
inline-block;
-webkit-animation:
stretchdelay1.2sinfiniteease-in-out;
animation:
stretchdelay1.2sinfiniteease-in-out;
}
.spinner.rect2{
-webkit-animation-delay:
-1.1s;
animation-delay:
-1.1s;
}
.spinner.rect3{
-webkit-animation-delay:
-1.0s;
animation-delay:
-1.0s;
}
.spinner.rect4{
-webkit-animation-delay:
-0.9s;
animation-delay:
-0.9s;
}
.spinner.rect5{
-webkit-animation-delay:
-0.8s;
animation-delay:
-0.8s;
}
@-webkit-keyframesstretchdelay{
0%,40%,100%{-webkit-transform:
scaleY（0.4）}
20%{-webkit-transform:
scaleY（1.0）}
}
@keyframesstretchdelay{
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
CSS代码：
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:
100pxauto;
width:
32px;
height:
32px;
position:
relative;
}
.cube1,.cube2{
background-color:
#67CF22;
width:
30px;
height:
30px;
position:
absolute;
top:
0;
left:
0;
-webkit-animation:
cubemove1.8sinfiniteease-in-out;
animation:
cubemove1.8sinfiniteease-in-out;
}
.cube2{
-webkit-animation-delay:
-0.9s;
animation-delay:
-0.9s;
}
@-webkit-keyframescubemove{
25%{-webkit-transform:
translateX（42px）rotate（-90deg）scale（0.5）}
50%{-webkit-transform:
translateX（42px）translateY（42px）rotate（-180deg）}
75%{-webkit-transform:
translateX（0px）translateY（42px）rotate（-270deg）scale（0.5）}
100%{-webkit-transform:
rotate（-360deg）}
}
@keyframescubemove{
25%{
transform:
translateX（42px）rotate（-90deg）scale（0.5）;
-webkit-transform:
translateX（42px）rotate（-90deg）scale（0.5）;
}50%{
transform:
translateX（42px）translateY（42px）rotate（-179deg）;
-webkit-transform:
translateX（42px）translateY（42px）rotate（-179deg）;
}50.1%{
transform:
translateX（42px）translateY（42px）rotate（-180deg）;
-webkit-transform:
translateX（42px）translateY（42px）rotate（-180deg）;
}75%{
transform:
translateX（0px）translateY（42px）rotate（-270deg）scale（0.5）;
-webkit-transform:
translateX（0px）translateY（42px）rotate（-270deg）scale（0.5）;
}100%{
transform:
rotate（-360deg）;
-webkit-transform:
rotate（-360deg）;
}
}
Loading动画效果五
HTML代码：
1
2
3
4
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:
100pxauto;
width:
90px;
height:
90px;
position:
relative;
text-align:
center;
-webkit-animation:
rotate2.0sinfinitelinear;
animation:
rotate2.0sinfinitelinear;
}
.dot1,.dot2{
width:
60%;
height:
60%;
display:
inline-block;
position:
absolute;
top:
0;
background-color:
#67CF22;
border-radius:
100%;
-webkit-animation:
bounce2.0sinfiniteease-in-out;
animation:
bounce2.0sinfiniteease-in-out;
}
.dot2{
top:
auto;
bottom:
0px;
-webkit-animation-delay:
-1.0s;
animation-delay:
-1.0s;
}
@-webkit-keyframesrotate{100%{-webkit-transform:
rotate（360deg）}}
@keyframesrotate{100%{transform:
rotate（360deg）;-webkit-transform:
rotate（360deg）}}
@-webkit-keyframesbounce{
0%,100%{-webkit-transform:
scale（0.0）}
50%{-webkit-transform:
scale（1.0）}
}
@keyframesbounce{
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
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:
100pxauto0;
width:
150px;
text-align:
center;
}
.spinner>div{
width:
30px;
height:
30px;
background-color:
#67CF22;
border-radius:
100%;
display:
inline-block;
-webkit-animation:
bouncedelay1.4sinfiniteease-in-out;
animation:
bouncedelay1.4sinfiniteease-in-out;
/*Preventfirstframefromflickeringwhenanimationstarts*/
-webkit-animation-fill-mode:
both;
animation-fill-mode:
both;
}
.spinner.bounce1{
-webkit-animation-delay:
-0.32s;
animation-delay:
-0.32s;
}
.spinner.bounce2{
-webkit-animation-delay:
-0.16s;
animation-delay:
-0.16s;
}
@-webkit-keyframesbouncedelay{
0%,80%,100%{-webkit-transform:
scale（0.0）}
40%{-webkit-transform:
scale（1.0）}
}
@keyframesbouncedelay{
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
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:
100pxauto;
background-color:
#333;
border-radius:
100%;
-webkit-animation:
scaleout1.0sinfiniteease-in-out;
animation:
scaleout1.0sinfiniteease-in-out;
}
@-webkit-keyframesscaleout{
0%{-webkit-transform:
scale（0.0）}
100%{
-webkit-transform:
scale（1.0）;
opacity:
0;
}
}
@keyframesscaleout{
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
CSS代码：
+ViewCode?
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:
100pxauto;
width:
20px;
height:
20px;
position:
relative;
}
.container1>div,.container2>div,.container3>div{
width:
6px;
height:
6px;
background-color:
#333;
border-radius:
100%;
position:
absolute;
-webkit-animation:
bouncedelay1.2sinfiniteease-in-out;
animation:
bouncedelay1.2sinfiniteease-in-out;
-webkit-animation-fill-mode:
both;
animation-fill-mode:
both;
}
.spinner.spinner-container{
position:
absolute;
width:
100%;
height:
100%;
}
.container2{
-webkit-transform:
rotateZ（45deg）;
transform:
rotateZ（45deg）;
}
.container3{
-webkit-transform:
rotateZ（90deg）;
transform:
rotateZ（90deg）;
}
.circle1{top:
0;left:
0;}
.circle2{top:
0;right:
0;}
.circle3{right:
0;bottom:
0;}
.circle4{left:
0;bottom:
0;}
.container2.circle1{
-webkit-animation-delay:
-1.1s;
animation-delay:
-1.1s;
}
.container3.circle1{
-webkit-animation-delay:
-1.0s;
animation-delay:
-1.0s;
}
.container1.circle2{
-webkit-animation-delay:
-0.9s;
animation-delay:
-0.9s;
}
.container2.circle2{
-webkit-animation-delay:
-0.8s;
animation-delay:
-0.8s;
}
.container3.circle2{
-webkit-animation-delay:
-0.7s;
animation-delay:
-0.7s;
}
.container1.circle3{
-webkit-animation-delay:
-0.6s;
animation-delay:
-0.6s;
}
.container2.circle3{
-webkit-animation-delay:
-0.5s;
animation-delay:
-0.5s;
}
.container3.circle3{
-webkit-animation-delay:
-0.4s;
animation-delay:
-0.4s;
}
.container1.circle4{
-webkit-animation-delay:
-0.3s;
animation-delay:
-0.3s;
}
.container2.circle4{
-webkit-animation-delay:
-0.2s;
animation-delay:
-0.2s;
}
.container3.circle4{
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
-
使用
CSS3
实现
Loading
加载
动画
效果
冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
《公务员财产申报制度》.docx
