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