我们都知道网页的加载需要一定的时间,
即使我们在努力优化代码执行效率以及压缩文件,
但是还是需要时间啊, 在这段时间内如果表面上不发生任何事情,
用户就会有比较糟糕的体验,
但是如果有一个动画或者一个进度条,
那就完全不一样了,
这篇文章分享纯CSS+HTML加载动画代码
HTML代码如下
<div id="start-screen"> <div class="in-start"> <div class="first"></div> <div class="second"></div> <div class="third"></div> </div> </div>
CSS代码如下:
html { height: 100%; } body { height: 100%; } #start-screen { height: 100%; width: 100%; background-color: #ccc; opacity: 80%; position: fixed; z-index: 999; } .in-start { height: 50px; width: 50px; position: absolute; margin-top: -45px; margin-left: -25px; top: 50%; left: 50%; } .in-start .first, .in-start .second, .in-start .third { height: 25px; width: 25px; position: absolute; float: left; border-radius: 50%; } .first { background-color: #ff0; animation: fir 1s linear 0.1s infinite; top: 0; left: 0; } .second { background-color: #0f0; animation: sec 1s linear 0.2s infinite; top: 0; left: 25px; } .third { background-color: #00f; animation: thi 1s linear 0s infinite; top: 25px; left: 0; } @keyframes fir { 0% { top: 0; left: 0; } 25% { top: 25px; left: 0; } 50% { top: 25px; left: 25px; } 75% { top: 0px; left: 25px; } } @keyframes sec { 0% { top: 0; left: 25px; } 25% { top: 0; left: 0; } 50% { top: 25px; left: 0; } 75% { top: 25px; left: 25px; } } @keyframes thi { 0% { top: 25px; left: 0; } 25% { top: 25px; left: 25px; } 50% { top: 0; left: 25px; } 75% { top: 0; left: 0; } }
html {
height:
100
%;
}
body {
height:
100
%;
}
#start-screen {
height:
100
%;
width:
100
%;
background-color:
#ccc;
opacity:
80
%;
position:
fixed;
z-index:
999;
}
.in-start {
height:
50
px;
width:
50
px;
position:
absolute;
margin-top:
-45
px;
margin-left:
-25
px;
top:
50
%;
left:
50
%;
}
.in-start
.first,
.in-start
.second,
.in-start
.third {
height:
25
px;
width:
25
px;
position:
absolute;
float:
left;
border-radius:
50
%;
}
.first {
background-color:
#ff0;
animation: fir
1
s
linear
0.1
s
infinite;
top:
0;
left:
0;
}
.second {
background-color:
#0f0;
animation: sec
1
s
linear
0.2
s
infinite;
top:
0;
left:
25
px;
}
.third {
background-color:
#00f;
animation: thi
1
s
linear
0
s
infinite;
top:
25
px;
left:
0;
}
@keyframes
fir {
0% {
top:
0;
left:
0;
}
25% {
top:
25
px;
left:
0;
}
50% {
top:
25
px;
left:
25
px;
}
75% {
top:
0
px;
left:
25
px;
}
}
@keyframes
sec {
0% {
top:
0;
left:
25
px;
}
25% {
top:
0;
left:
0;
}
50% {
top:
25
px;
left:
0;
}
75% {
top:
25
px;
left:
25
px;
}
}
@keyframes
thi {
0% {
top:
25
px;
left:
0;
}
25% {
top:
25
px;
left:
25
px;
}
50% {
top:
0;
left:
25
px;
}
75% {
top:
0;
left:
0;
}
}