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