如何用CSS3制作页面圆圈加载动画（附代码）
时间：2024/10/17作者：未知来源：手揣网教程人气：
- [摘要]打开页面时，经常会遇到页面正在加载的情况，作为一个前端工程师，你知道如何用CSS3实现页面加载动画效果吗？这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码，有一定的参考价值，感兴趣的朋友可以看看...打开页面时，经常会遇到页面正在加载的情况，作为一个前端工程师，你知道如何用CSS3实现页面加载动画效果吗？这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码，有一定的参考价值，感兴趣的朋友可以看看。
制作页面加载动画需要用到很多CSS3中的属性，比如：animation属性，position定位，border-radius圆角，transform属性等等，如有不清楚的同学可以看看我以前的文章，之前都有介绍过，或者访问 CSS3视频教程，这些都是基础，一定要掌握。
实例：制作一个圆圈加载动画效果，圆圈在加载时大小由小变大，颜色由浅变深，具体代码如下：
HTML部分：
<div class="loader"> <div class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div>CSS部分：
.loader{ width: 300px; border: 1px solid #ccc; height: 200px; display: flex; box-sizing: border-box; align-items: center; justify-content: center; } @-webkit-keyframes loading{ 50%{ transform: scale(0.4); opacity: 0.3; } 100%{ transform: scale(1); opacity: 1; } } .loading{ position: relative; } .loading i{ display: block; width: 15px; height: 15px; border-radius: 50%; position: absolute; background: #333; } .loading i:nth-child(1){ top: 25px; left: 0; -webkit-animation: loading 1s ease 0s infinite; } .loading i:nth-child(2){ top: 17px; left: 17px; -webkit-animation: loading 1s ease 0.12s infinite; } .loading i:nth-child(3){ top: 0; left: 25px; -webkit-animation: loading 1s ease 0.24s infinite; } .loading i:nth-child(4){ top: -17px; left: 17px; -webkit-animation: loading 1s ease 0.36s infinite; } .loading i:nth-child(5){ top: -25px; left: 0; -webkit-animation: loading 1s ease 0.48s infinite; } .loading i:nth-child(6){ top: -17px; left: -17px; -webkit-animation: loading 1s ease 0.6s infinite; } .loading i:nth-child(7){ top: 0; left: -25px; -webkit-animation: loading 1s ease 0.72s infinite; } .loading i:nth-child(8){ top: 17px; left: -17px; -webkit-animation: loading 1s ease 0.84s infinite; }效果图：
以上分享了CSS3实现页面加载动画效果的代码，项目中用的比较多，可以直接拿过去使用，也希望大家可以自己动手尝试，看看自己能不能写出其他的效果，希望这篇文章对你有所帮助！更多相关教程请访问
CSS视频教程以上就是如何用CSS3制作页面圆圈加载动画（附代码）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：如何用CSS3制作页面圆圈加载动画（附代码）