本篇文章分享纯CSS+HTML加载动画代码
主要用到css3的动画
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; } }
网页加载完成后, 可以用JS移除根元素