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

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

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

介绍

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

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

VID_20211010_190103.gif

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

正文

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 ,根据遍历得到 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;
  }
}
复制代码

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

VID_20211010_190103.gif

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

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

结语

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

猜你喜欢

转载自juejin.im/post/7017417601576304671

相关文章