css特效——音波加载

音波加载

接上一篇的内容

一、搭建思路

首先，造一个大的盒子outbox，接着往里面填充10个小盒子span。设置他们的布局，先让大盒子绕X轴旋转一定的角度，达到斜俯视的效果，更像3D.接着，将小盒子按顺序缩小，做成套环的样子，最后，设置动画效果，让每个小的盒子 都按向上后下的动画动起来，在按顺序延迟一定的秒数。这样就成了联动效果。

二、步骤代码

先设置HTML的

 <div class="outbox">
        <span style="--num:1"></span>
        <span style="--num:2"></span>
        <span style="--num:3"></span>
        <span style="--num:4"></span>
        <span style="--num:5"></span>
        <span style="--num:6"></span>
        <span style="--num:7"></span>
        <span style="--num:8"></span>
        <span style="--num:9"></span>
        <span style="--num:10"></span>
    </div>

style="–num:1" 对于这个不懂的话下面有讲解。

再初始化大盒子和背景

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: rgb(4, 6, 17);
}
.outbox{
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform: perspective(600px) rotateX(50deg) translateZ(50px);
}

最后设置span的样式

.outbox span{
    position: absolute;
    top: calc(-8px * var(--num));
    left: calc(-8px * var(--num));
    bottom: calc(-8px * var(--num));
    right: calc(-8px * var(--num));
    border: 8px solid rgba(0, 162, 255,0.8);
    box-shadow: 0 6px 0 rgb(0, 162, 255),
    inset 0 6px 0 rgba(0, 162, 255,.9);
    /* background-color: rgba(0, 162, 255,0); */
    border-radius: 50%;
    animation: move 1.5s ease-in-out infinite alternate;
    animation-delay: calc(var(--num) * 0.1s);
}

其中，小盒子的宽高我没有设置，让他继承父级的宽高，方便使用CSS函数。

move 是我定义的一个函数。在后面会有。

top: calc(-8px * var(–num));
left: calc(-8px * var(–num));
bottom: calc(-8px * var(–num));
right: calc(-8px * var(–num));

这是动态的计算小盒子再大盒子里面的方位，强制让他变小

定义一个先下后上的动画

@keyframes move{
    0%,100%{
        transform: translateZ(0px);
    }
    50%{
       transform: translateZ(-100px);
    }
}

三、CSS函数var()

这个函数必须要求定义一个“–XXX：XX”的属性，写在行内样式中。之后用var(–XXX)来使用，相当于JS中遍历这个数组一样。

[CSS var() 函数 | 菜鸟教程 (runoob.com)

四、效果展示