废话不多说了 ， 直接给大家贴代码了 ， ： ：
<div class = lade> <p> 100 <span> </span> </p> </div>
*{Margin: 0; Padding: 0;} .loading {Höhe: 100%; Breite: 100%; Position: behoben; Hintergrund: RGBA (255,255,255,1); } .loading> p {Position: absolut; links: 0; rechts: 0; oben: 0; unten: 0; Rand: Auto; Höhe: 160px; Breite: 160px; Text-Align: Mitte; Zeilenhöhe: 160px; Schriftgröße: 30px; Farbe:#f00;} .loading p span {Position: absolut; Anzeige: Block; Höhe: 140px; Breite: 140px; Margin: 10px; Border-Radius: 50%;-Webkit-Box-Shadow : 0 2px 3px RGBA (102,197,37,0,8); Animation: Ladefreundlichkeit 1s unendlich; links: 0; oben: 0;} @keyframes laden {0%{transformieren: rotieren (0deg)} 100%{Transformation: Drehen (360de)}}}<div class = lade> <p> <i> </i> <i> </i> <i> </i> <i> </i> <i> </i> </p> </ div>
*{Margin: 0; Padding: 0;} .loading {Höhe: 100%; Breite: 100%; Position: behoben; Hintergrund: RGBA (255,255,255,0,95); } .loading> p {Position: absolut; links: 0; rechts: 0; ober: 0; unten: 0; Rand: auto; Höhe: 30px; Breite: 120px;} .loading> pi {display: block; float: links; Rand: 0 5px; Breite: 5px; Höhe: 30px; Hintergrund:#f00; Transformation: Skalyy (0,3); Animation: Laden 1S Leichte unendliche Alternative; } .loading> pi: n-Kind (2) {Animation-Delay: 0.1s;}. Loading> Pi: N-Child (3) {Animation-Delay: 0.2s;}. Loading> pi: n-Child (N-te-Kind (n-te-Kind () 4) {Animation-Delay: 0,3s;}. Loading> Pi: N-te-Kind (5) {Animation-Delay: 0,4s;} @KeyFrames Loading {0,40%, 100%{Transformation: skaliert (0,3); } 20%{Transformation: scaley (1);}}其实我想做的是加载进度条效果 ， 但是假的进度条太烂 ， 真的又没有特别好的办法 ， 判断图片这种总感觉比较漏。 判断图片这种总感觉比较漏。
这是代码 ， 有完美解决方案了解决。 有完美解决方案了解决。
<Script> document.onReadyStatechange = function () {if (document.readyState == 'complete') {$ ('. Loading'). fadeout (); }} </script>总结以上所述是小编给大家介绍的 html5 等待加载动画效果 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对 vevb 武林网网站的支持！