废话不多说了、直接给大家贴代码了、具体代码如下所示:
<div class = loading> <p> 100 <span> </span> </p> </div>
*{マージン:0;パディング:0;} .loading {height:100%; width:100%; position:sixt; background:rgba(255,255,255,1); } .loading> p {position:absolute; reft:0; right:0; top:0; bottom:0; margin:auto; height:160px; width:160px; text-align:center; line-height:160px; font-size:30px; color:#f00;} .loading p span {position:aspolute:display; display:block; height:140px; width:140px; margin:10px; border-radius:50%; -webkit-box-shadow :0 2px 3px RGBA(102,197,37,0.8);アニメーション:1S Infiniteのロード;左:0; TOP:0;} @KeyFramesロード{0%{変換:回転(0DEG)} 100%{変換:回転(360DEG)}}}<div class = loading> <p> <i> </i> <i> </i> <i> </i> <i> </i> <i> </i> </p> </ div>
*{マージン:0;パディング:0;} .loading {height:100%; width:100%; position:sixt; background:rgba(255,255,255,0.95); } .loading> p {position:aspolute; reft:0; right:0; top:0; bottom:0; margin:auto; height:30px; width:120px;} loading> pi {display:block; float:左;マージン:0 5px;幅:5px;高さ:30px;背景:#f00;変換:scaley(0.3);アニメーション:1秒の容易な無限の代替。 } .loading> pi:nth-child(2){animation-delay:0.1s;}。ロード> pi:nth-child(3){animation-delay:0.2s;}。ロード> pi:nth-child( 4){animation-delay:0.3s;}。ロード> pi:nth-child(5){animation-delay:0.4s;} @keyframes loading {0,40%、100%{transform:scaley(0.3); } 20%{transform:scaley(1);}}其实我想做的是加载进度条效果、但是假的进度条太烂、真的又没有特别好的办法、判断图片这种总感觉比较漏。
这是代码、有完美解决方案了解决。
<script> document.onreadystatechange = function(){if(document.readystate == 'complete'){$( '。loading')。fadeout(); }} </script>总结以上所述是小编给大家介绍的html5等待加载动画效果、希望对大家有所帮助、如果大家有任何疑问请给我留言、小编会及时回复大家的。在此也非常感谢大家对vevb武林网网站的支持!