等待页面动画效果,页面加载等待效果

　　废话不多说了，直接给大家贴代码了，具体代码如下所示：

　　div class= loading p 100 span/span/p/div * { margin:0；填充：0;} .加载{高度：100%;宽度：100%;位置：固定；背景：rgba(255，255，255，1)；} .加载p {位置：绝对；左：0;右：0;top:0；底部：0;边距：自动；高度：160像素宽度：160像素文本对齐：居中；行高：160像素；字体大小：30px颜色：# f00}。正在加载span {位置：绝对；显示：块；高度：140像素宽度：140像素边距：10px边界半径：50%;-WebKit-box-shadow:0 2px 3px rgba(102，197，37，0.8)；动画：载入放松1s无限；左：0;top:0；} @关键帧加载{ 0% {变换：旋转(0度)} 100% {变换：旋转(360度)} }

　　div class= loading p I/I I/I I/I I/I I/I/p/div * { margin:0；填充：0;} .加载{高度：100%;宽度：100%;位置：固定；背景：rgba(255，255，255，0.95)；} .加载p {位置：绝对；左：0;右：0;top:0；底部：0;边距：自动；高度：30px宽度：120px}。正在加载pi { display:block；浮动：左；保证金：0 5px宽度：5px高度：30px背景：# f00变换：scaleY(0.3)；动画：加载1s缓解无限交替；}.加载p I:n-child(2){ animation-delay:0.1s；}.加载p I:n-child(3){ animation-delay:0.2s；}.加载p I:n-child(4){ animation-delay:0.3s；}.加载p I:n-child(5){ animation-delay:0.4s；} @关键帧加载{ 0，40%，100% { transform:scaleY(0.3)；} 20% { transform:scaleY(1)；} }

　　其实我想做的是加载进度条效果，但是假的进度条太烂，真的又没有特别好的办法，判断图片这种总感觉比较漏。

　　这是代码，有完美解决方案了解决。

　　脚本文档。onreadystatechange=function(){ if(document。ready state== complete ){ $( .正在加载)。fadeOut()；} }/脚本总结

　　以上所述是小编给大家介绍的HTML5等待加载动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读