如何用CSS3制作页面圆圈加载动画（附代码）

来源：动视网责编：小采时间：2020-11-02 22:08:56

如何用CSS3制作页面圆圈加载动画（附代码）

如何用CSS3制作页面圆圈加载动画（附代码）:打开页面时，经常会遇到页面正在加载的情况，作为一个前端工程师，你知道如何用CSS3实现页面加载动画效果吗？这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码，有一定的参考价值，感兴趣的朋友可以看看。制作页面加载动画需要用到很多CSS3中的属性，比

推荐度：

点击下载本文 文档为doc格式

导读如何用CSS3制作页面圆圈加载动画（附代码）:打开页面时，经常会遇到页面正在加载的情况，作为一个前端工程师，你知道如何用CSS3实现页面加载动画效果吗？这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码，有一定的参考价值，感兴趣的朋友可以看看。制作页面加载动画需要用到很多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; 
 }

效果图：

图片aa.jpg