WEB加载动画之3D波环动画

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

介绍

本期将会使用scss写一个3d波环的动画，可以当做web场景中的加载动画使用，通过这个案例也可以了解到scss的遍历语法以及怎么做动画延迟。

接下来，我们先看一下效果吧~

怎么样，有没有被催眠到？这个其实非常简单易学，我们马上就要开始咯~

正文

1.html结构

<div class="main">
    <ul class="circle">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
复制代码

这里事先说明下，.main作为将作为主容器，全屏填充设置主背景。.circle将作为圆环父容器里面将设置preserve-3d，其下的li标签将做波动动画。

2.main样式

.main {
  width: 100%;
  min-height: 100vh;
  padding: 0px 0 0px;
  text-align: center;
  background-color: #0c0c0c;
  overflow: hidden;
  font-size: 14px;
  background-image: radial-gradient( circle farthest-corner at -4% -12.9%,  rgb(51, 66, 73) 0.3%, rgba(30,33,48,1) 90.2% );
  display: flex;
  justify-content: center;
  align-items: center;
}
复制代码

我们这里用background-image写一个渐变深色的背景，然后用设置为弹性盒子再让里面元素居中显示。

微信截图_20211010194459.png

3.circle样式

$r:12px;
.circle{
    width: 320px;
    height: 320px;
    position: relative;
    perspective: 800px;
    transform-style: preserve-3d;
    transform: rotateX(60deg);
    li {
        position: absolute;
        border: 3px solid white;
        border-radius: 50%;
        box-shadow: 0 2px 0 #c9c5c5,inset 0 2px 0 #c9c5c5;
        top: 0;
        left: 0;
        @for $i from 1 through 12 {
            &:nth-child(#{$i}) {
                left:calc(#{$i*$r});
                top:calc(#{$i*$r});
                right:calc(#{$i*$r});
                bottom:calc(#{$i*$r});
                animation: move 3.2s cubic-bezier(.5,-.25,.2,1) infinite both;
                animation-delay: calc(#{$i*0.1}s);
            }
        }
    }
}
复制代码

我们将在circle设置圆环的大小，并设置成3d模式，再给他个800px深度。下面li标签有12个先设置成绝对定位以及把它变成圆环，我们就用scss去做遍历，计算left,top,right,bottom的大小，也就是定义一个常量 $r，根据遍历得到$ i去做乘法，使其产生不同距离，因为父级是正方形，li又是绝对定位，所以不同距离就会出现不同大小的圆圈出来，整个一看就变成了波环了。

同时，我们在li还要设置好动画，和不同的动画延迟，因为我们接下来就要让他动起来了~

微信截图_20211010194955.png

4.波动动画

@keyframes move{
  0%{
    transform: translateZ(-120px) scale(1) skew(0deg);
    opacity: .25;
  }
  50%{
    transform: translateZ(120px) scale(-1);
    opacity: .75;
  }
  100%{
    transform: translateZ(-120px) scale(1) skew(0deg);
    opacity: .25;
  }
}
复制代码

这个动画就是从上到下，从大到小，从浅到深去做过度，很简单的直接看代码了，不做过多赘述。

很简单的，因为有不同的延时所以各个li标签组成的动画整体就会变得连贯。

这样，我们的动画就出来了，在线演示。

结语

发现没有，用scss的遍历可以做出非常惊艳的元素动画或者是大批量的属性变换。这个案例我们只用了仅仅数十行就完成了，还是非常简单的，没有学习scss前端新人一定要马上入坑啊太有趣了，我们还可以以此为例，一起发挥想想，相信你会做出一个属于自己的scss动画来的~