CSS实现loading小动画

更新时间:2023-04-03 19:07:36 阅读：评论：0

纯css实现loading动画

相信各位上网过程中最不希望看到的就是加载中不停转圈圈的画面了
那么他是怎么实现的呢？其实通过一些简单的css技巧就可以实现啦！
首先双手奉上代码

 <style> *{ margin: 0; padding: 0; } body{ background-color: #000000; } .container{ margin: 300px auto; width: 80px; height: 80px; position: relative; } .box{ width: 50px; height: 50px; display: flex; flex-direction: column; justify-content: space-between; } span{ display: block; width: 15px; height: 15px; background-color: #fff; border-radius: 50%; text-align: center; line-height: 15px; animation: loading 0.8s linear infinite; box-shadow: 0px 0px 24px 2px #ffffff; } .group{ display: flex; justify-content: space-between; } .container .box:nth-of-type(2){ transform: rotate(45deg); position: absolute; top: 0; left: 0; } .c1{ animation-delay: -0.5s; } .c2{ animation-delay: -0.6s; } .c3{ animation-delay: -0.7s; } .c4{ animation-delay: -0.8s; } .c5{ animation-delay: -0.9s; } .c6{ animation-delay: -1s; } .c7{ animation-delay: -1.1s; } .c8{ animation-delay: -1.2s; } @keyframes loading { 0%{ transform: scale(0); } 50%{ transform: scale(1); } 100%{ transform: scale(0); } } </style></head><body>   <div class="container">       <div class="box">           <div class="group">               <span class="c8"></span>               <span class="c2"></span>           </div>           <div class="group">               <span class="c6"></span>               <span class="c4"></span>           </div>       </div>       <div class="box">    荒岛余生影评       <div class="group">               <span class="c1"></span>               <span class="c3"></span>           </div>           <div class="group">               <span class="c7"></span>               <span class="c5"></span>           </div>       </div>   </div>

下面是实现的效果，我可能添加的阴影有点多，大家自己可以自己进行调整
首先要做出这样一个动画效果来，我们要去思考一个问题：它是真的在转圈圈吗？
答案是：NO！
在我看来，其实很多特效不过是用了障眼法 这让我想起了《犯罪嫌疑人X的献身》中的一句经典台词：

看上去是几何问题，实际上是函数问题

其实无论是在数学领域，还是在计算机领域，还是无论在其他任何领域，处理问题的关键就在于是否看清楚问题的本质为何。回到这个动画，看起来是一个旋转的效果，其实是八个圆在原地在不同时延下放大缩小的结果

第一步：画出八个圆

这里我采用的方法是先定义了两个宽高相同的容器，里面各自包含四个圆，放在四个角落，（可以用定位完成，也可以名字大全用弹性盒子完成，大家选择自己喜欢的方法就好）此时四个圆是重叠的，我们把其中一个容器渲染45度，我们就可以得到一个由八个圆组成的圆环。
代码如下：

  .container .box:nth-of-type(2){            transform: rotate(45deg);            position: absolute;            top: 0;            left: 0;

效果如下：
至于圆的大小，阴影，颜色，大家自己随意发挥

第二步：定义关键帧

这里用到了animation

  @keyframes loading {            0%{                transform: scale(0);            }            50%{                transform: scale(1);            }            100%{                transform: scale(0);            }        }

span{            display: block;            width: 15px;            height: 15px;        四六级多少分及格    background-color: #fff;            border-radius: 50%;            text-align: center;            line-height: 15px;            anim英文句子翻译ation: loading 0.8s linear infinite;            box-shadow: 0px 0px 24px 2px #ffffff;        }

把我们所定义的时间分为两个等份：
0~50%放大1倍；50% ~ 100%然后在还原到原来的大小，给一个infinite ，让他无限循环。

这个时候你可以看到八个圆在原地一起变大变小

第三步：添加不同延时

  .c1{            animation-delay: -0.5s;        }        .c2{            animati教资面试考试时间on-delay: -0.6s;        }        .c3{            animation-delay: -0.7s;        }        .c4{            animation-delay: -0.8s;        }        .c5{            animation-delay: -0.9s;        }        .c6{            animation-delay: -1s;        }        .c7{            animation-delay: -1.1s;        }        .c8{            animation-delay: -1.2s;        }