HTML5加载时的等待动画效果制作
导读:收集整理的这篇文章主要介绍了HTML5加载时的等待动画效果制作,觉得挺不错的,现在分享给大家,也给大家做个参考。这篇文章通过实例代码给大家介绍了HTML5等待加载动画效果的完美解决方案,感兴趣的朋友参考下吧废话不多说了,直接给大家贴代码了,...
收集整理的这篇文章主要介绍了HTML5加载时的等待动画效果制作,觉得挺不错的,现在分享给大家,也给大家做个参考。这篇文章通过实例代码给大家介绍了HTML5等待加载动画效果的完美解决方案,感兴趣的朋友参考下吧废话不多说了,直接给大家贴代码了,具体代码如下所示:
p class="loading"> p> 100span> /span> /p> /p>
*{ margin:0; padding:0; } .loading{ height:100%; width:100%; posITion:fixed; background:rgba(255,255,255,1); } .loading > p{ position:absolute; left: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:absolute; display:block; height:140px; width:140px; margin:10px; border-radius:50%; -webkit-box-shadow:0 2px 3px rgba(102,197,37,0.8); animation:loading ease 1s infinite; left:0; top:0; } @keyframes loading{ 0%{ transform:rotate(0deg)} 100%{ transform:rotate(360deg)} }
p class="loading"> p> i> /i> i> /i> i> /i> i> /i> i> /i> /p> /p>
*{ margin:0; padding:0; } .loading{ height:100%; width:100%; position:fixed; background:rgba(255,255,255,0.95); } .loading > p{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; height:30px; width:120px; } .loading > p i{ display: block; float:left; margin:0 5px; width:5px; height:30px; background:#f00; transform:scaleY(0.3); animation:loading 1s ease infinite alternate; } .loading > p i:nth-child(2){ animation-delay:0.1s; } .loading > p i:nth-child(3){ animation-delay:0.2s; } .loading > p i:nth-child(4){ animation-delay:0.3s; } .loading > p i: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加载时的等待动画效果制作的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5加载时的等待动画效果制作
本文地址: https://pptw.com/jishu/583590.html