前言
这次给大家带来一款简单又炫酷的爱心加载特效，用通俗易懂的代码实现炫酷的特效，相信这是很多人都想做的事。接下来就跟随我的步伐来完成这个炫酷的特效吧。
效果预览
炫不炫酷大伙一看便知。
HTML结构
首先，我们来设计一下基础结构，相关代码如下所示。
<section>
<div class="loader">
<span style="--i: 1"></span>
<span style="--i: 2"></span>
<span style="--i: 3"></span>
<span style="--i: 4"></span>
......
此处span一直到--i:20
</div>
</section>
在HTML中，使用section包裹一个具有loader类的<div>元素。这个<div>元素将包含用于创建加载动画的<span>元素。然后使用--i自定义属性来设置每个<span>元素的动画延迟，使得它们按照一定的顺序依次出现。通过设置不同的--i值，可以实现不同的动画效果。
整个加载动画的效果是，一系列的<span>元素以一定的间隔依次出现，形成一个连续的旋转动画，从而给用户呈现出正在加载的效果。
CSS设计
有了HTML结构，我们就可以往上面添砖加瓦了，开始设计样式。
section{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #042104;
animation: animateBgColor 3s linear infinite;
}
将section区块设置为弹性布局，使其内部元素可以方便地进行水平和垂直居中。然后应用一个名为animateBgColor的动画，持续时间为3秒，以线性方式进行变化，并且无限循环播放。总的来说，我们创建了一个占满整个屏幕的区块，
动画相关代码如下：
@keyframes animateBgColor {
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(300deg);
}
}
在这个动画中，0%表示动画开始时的状态，100%表示动画结束时的状态。在0%的状态下，使用filter属性的hue-rotate()函数将背景色的色相设置为0度，即不进行任何色相旋转。
在100%的状态下，使用filter属性的hue-rotate()函数将背景色的色相设置为300度，即将背景色按顺时针方向旋转300度。因此，该动画的整体效果是，元素的背景色会从初始状态开始，逐渐旋转到300度的色相，创建了一个颜色旋转的动画效果。
接下来就开始设置加载器的基本样式了。
.loader span{
position: absolute;
left: -200px;
top: 0;
width: 200px;
height: 2px;
transform-origin: right;
transform: rotate(calc(18deg * var(--i)));
}
这里的基本属性不多解释，咱们直接看更复杂的属性。在这里使用transform旋转变换将加载器按照一定角度进行旋转，其中var(--i)是一个CSS自定义属性，表示加载器的索引，可以根据具体情况进行调整，calc(18deg * var(--i))表示将每个加载器都按照18度的倍数进行旋转。
最后就是加载动画的设计了。
.loader span::before{
content: '';
position: absolute;
left: 0;
width: 15px;
height: 15px;
background: #00ff0a;
border-radius: 50%;
animation: animate 2s linear infinite;
box-shadow: 0 0 10px #00ff0a,
0 0 20px #00ff0a,
0 0 40px #00ff0a,
0 0 80px #00ff0a,
0 0 100px #00ff0a;
animation-delay: calc(-0.1s * var(--i));
}
在span元素之前插入一个伪元素。将伪元素的定位方式设置为绝对定位，设置伪元素的宽度和高度为15px，边框半径为50%，使其呈现圆形，即设计一个圆形。然后应用一个名为animate的动画效果，持续时间为2秒。接着为伪元素添加多个阴影效果，创建一个逐渐放大的光晕效果。最后设置动画延迟时间，根据--i变量的值计算延迟时间，实现多个加载球的错开效果。
下面是动画相关的代码。
@keyframes animate {
0%{
transform: translateX(0) scale(0.5);
}
50%{
transform: translateX(200px) scale(1);
}
100%{
transform: translateX(0) scale(0.5);
}
}
在动画开始时0%，元素将会通过transform属性进行平移和缩放变换，translateX(0)表示水平方向上不进行平移，scale(0.5)表示元素的大小为原来的一半。
在动画进行到一半的时候50%，元素将会通过transform属性进行平移和缩放变换，translateX(200px)表示水平方向上平移200像素，scale(1)表示元素的大小保持不变。
在动画结束时100%，元素将会通过transform属性进行平移和缩放变换，translateX(0)表示水平方向上不进行平移，scale(0.5)表示元素的大小为原来的一半。
效果终览
完整代码可参考码上掘金。
总结
以上就是整个特效的实现过程了，代码简单，通俗易懂，但又不失炫酷效果，是一个值得多看多理解的特效。可以自己多练几遍，方便自己更好地理解，如果有什么问题随时在评论区告诉我~
