本文分享了如何使用HTML和CSS创建两种不同的等待加载动画效果，包括旋转圆圈和浮动条形图。提供了完整的代码示例，并在文章末尾探讨了加载进度条的挑战和解决方案。当网页内容加载完成后，通过JavaScript移除加载动画。
废话不多说了，直接给大家贴代码了，具体代码如下所示：
100
*{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)}
}
*{margin:0;padding:0;}
.loadin
最低0.47元/天 解锁文章
623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
