手把手教你打造一个“蚊香”式加载

前言

这次给大家带来的是一个类似蚊香加载一样的效果，这个效果还是非常具有视觉欣赏性的，相比前几篇文章的CSS特效，这一次的会比较震撼一点。

效果预览

从效果上看感觉像是一层层蚊香摞在一起，通过动画来使得它们达到3D金钟罩的效果。

HTML布局

首先我们通过15个span子元素来实现金钟罩的每一层，用于创建基本结构。从专业术语上讲，每个span元素都代表加载动画中的一个旋转的小点。通过添加多个span元素，可以创建出一串连续旋转的小点，形成一个加载动画的效果。

<div class="loader">

        <span></span>

        // 以下省略15个span元素

 </div>

CSS设计

完成了基本的结构布局，接下来就是为它设计CSS样式了。我们一步一步来分析：

首先是类名为loader的CSS类，相关代码如下。

.loader{
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(60deg);

}

我们将元素的定位方式设置为相对定位，使其相对于其正常位置进行定位。然后定义好宽度和高度之后，设置元素的变换样式为preserve-3d，这样可以元素的子元素也会受到3D变换的影响。除此之外，还需要transform属性来设置元素的变换效果。这里的perspective(500px)表示以500像素的视角来观察元素，rotateX(60deg)则表示绕X轴顺时针旋转60度。

这样就将一个宽高都定义好的元素进行了透视效果的3D旋转，使其以60度角度绕X轴旋转。

loader类可以理解为父容器，接下来就是loader类中的子元素span。

.loader span{
position: absolute;
display: block;
border: 5px solid #fff;
box-shadow: 0 5px 0 #ccc,

                inset 0 5px 0 #ccc;
box-sizing: border-box;
border-radius: 50%;
animation: animate 3s ease-in-out infinite;

}

通过以上样式，我们可以创建一个圆形的动画效果，边框有阴影效果，并且以动画的方式不断旋转。关于CSS部分大部分都是一样的，这里主要介绍一下这里定义的动画效果。名称为animate，持续时间为3秒，缓动函数为ease-in-out，并且动画无限循环播放。

@keyframes animate {
0%,100%{
transform: translateZ(-100px);

    }
50%{
transform: translateZ(100px);

    }

}

这是一个关键帧动画。关键帧是指动画在不同时间点上的状态或样式。首先该动画名为animate，它包含了三个时间点的样式变化：

在0% 和100% 的时间点，元素通过transform: translateZ(-100px)样式将在Z轴上向后移动100像素，这将使元素远离视图。

在50% 的时间点，元素通过transform: translateZ(100px)样式将在Z轴上向前移动100像素。这将使元素靠近视图。

通过应用这个动画，span元素将在动画的持续时间内以一定的速率来回移动，从而产生一个视觉上的动态效果。

最后就是单独为每个子元素span赋予样式了。

.loader span:nth-child(1){
top: 0;
left: 0;
bottom: 0;
right: 0;
animation-delay: 1.4s;

}
.loader span:nth-child(2){
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
animation-delay: 1.3s;

}

......

以下省略到第15个span元素

第一个span元素的样式设置了top、left、bottom和right属性为0，这意味着它会填充父元素的整个空间。它还设置了animation-delay属性为1.4秒，表示在加载动画开始之后1.4秒才开始播放动画。

后面14个span元素都是按照这个道理，以此类推即可。通过给span元素的动画延迟属性的不同设置，可以实现加载动画的错落感和流畅的过渡效果。

总结

以上就是整个效果的实现过程了，通过设计的动画来实现这个蚊香式加载，整体还是比较简单的。大家可以去码上掘金看看完整代码，然后自己去尝试一下，如果有什么创新的地方或者遇到了什么问题欢迎在评论区告诉我~