我们都知道网页的加载需要一定的时间,
即使我们在努力优化代码执行效率以及压缩文件,
但是还是需要时间啊, 在这段时间内如果表面上不发生任何事情,
用户就会有比较糟糕的体验,
但是如果有一个动画或者一个进度条,
那就完全不一样了,
这篇文章分享纯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: 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;
}
}
原文地址：https://www.cnblogs.com/jedenzhan/p/8969992.html