: , 直接给大家贴代码了 : :
<div class = loading> <p> 100 <span> </span> </p> </viv>
*{margin: 0 ؛ padding: 0 ؛} .Loading {الارتفاع: 100 ٪ ؛ العرض: 100 ٪ ؛ الموضع: ثابت ؛ الخلفية: RGBA (255،255،255،1) ؛ . Font-Size: 30px ؛ اللون:#f00 ؛}. : 0 2px 3px RGBA (102،197،37،0.8) ؛ الرسوم المتحركة: Loading Ease 1S Infinite ؛ Left: 0 ؛ TOP: 0 ؛} KeyFrames Loading {0 ٪ {Transform: Rotate (0deg)} 100 ٪ {transform: Rotate (360deg)}}<div class = loading> <p> <i> </i> <i> </i> <i> </i> <i> </i> <i> </i> </p> </ div>
*{margin: 0 ؛ padding: 0 ؛} .Loading {الارتفاع: 100 ٪ ؛ العرض: 100 ٪ ؛ الموضع: ثابت ؛ الخلفية: RGBA (255،255،255،0.95) ؛ . اليسار ؛ الهامش: 0 5px ؛ العرض: 5px ؛ الارتفاع: 30px ؛ الخلفية:#f00 ؛ التحويل: Scaley (0.3) ؛ الرسوم المتحركة: تحميل 1s سهولة Infinite بديلة ؛ . 4) {الرسوم المتحركة delay: 0.3S ؛}. loading> pi: nth-child (5) {الرسوم المتحركة delay: 0.4S ؛} @keyframes loading {0،40 ٪ ، 100 ٪ {transform: messiony (0.3) ؛ } 20 ٪ {transform: Scaley (1) ؛}}其实我想做的是加载进度条效果 , 但是假的进度条太烂 , 真的又没有特别好的办法 , 判断图片这种总感觉比较漏。
这是代码 , 有完美解决方案了解决。
<script> document.onReadyStateChange = function () {if (document.readyState == 'complete') {$ ('. loading'). fadeout () ؛ }} </script>总结以上所述是小编给大家介绍的 html5 等待加载动画效果 , 希望对大家有所帮助 , 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对 小编会及时回复大家的。在此也非常感谢大家对 vevb 武林网网站的支持!