前言
各位还记得前几天实现的关于音乐播放器的效果吗？这次又是一个和音乐相关的小效果实现 —— 音乐节奏感加载。话不多说，直接看下面的效果预览吧。
效果预览
看着它是不是有种听音乐的感觉了，接下来就带大家来实现它，它的实现过程也是比较简单的。
HTML部分
首先我们看到 HTML 部分，这是整个效果的基础。相关代码如下。
<div class="equalizer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
这里总共由以下几个元素实现。<div class="equalizer"> 是一个父容器，用于包裹整个音频均衡器元素。<span> 表示频段（一般音频均衡器的条数对应音频频段的数量），这里包含了 5 个频段。在后面关于 CSS 的介绍中这些 <span> 元素会通过 CSS 样式进行动画处理，以展现出跳动或波动的效果，从而呈现出音频播放的动态感。
CSS部分
接着我们看到 CSS 部分，这里就是为上面实现的 HTML 部分添加样式，相关代码如下。
.equalizer {
width: 10em;
height: 10em;
display: flex;
justify-content: space-between;
}
.equalizer span {
width: 1.5em;
background: linear-gradient(red, yellow, green);
animation: up-and-down 2s linear infinite calc(-1 * 0.4s * var(--n));
}
.equalizer翻译过来就是音频均衡器的意思，它设置了宽度和高度，并使用 Flexbox 布局使其内部的频段元素水平间距相等。.equalizer span表示音频均衡器的频段元素样式设置。每个频段的宽度为 1.5em，背景设置为一个水平方向的渐变，从红色到黄色再到绿色。
并且通过 animation: up-and-down 2s linear infinite calc(-1 * 0.4s * var(--n)); 应用一个名为 up-and-down 的动画，该动画的作用是使频段上下跳动。2s 表示动画持续时间，linear 表示动画速度效果，infinite 表示循环播放，calc(-1 * 0.4s * var(--n)) 用于动态修改动画延迟时间，通过 var(--n) 变量控制。
.equalizer span:nth-child(1) {
--n: 1;
}
.equalizer span:nth-child(2) {
--n: 2;
}
.equalizer span:nth-child(3) {
--n: 3;
}
.equalizer span:nth-child(4) {
--n: 4;
}
.equalizer span:nth-child(5) {
--n: 5;
}
这里则为 equalizer 容器内的每个频段元素设置了 --n 自定义属性的值，从 1 到 5。这些自定义属性被赋予给每个频段元素，用于结合动画的 calc(-1 * 0.4s * var(--n)) 部分，以使每个频段的动画具有不同的延迟时间。这样可以实现不同频段之间的错落感和动态效果。
最后就是关于上面提到的 up-and-down 动画的编写以及介绍了。
@keyframes up-and-down {
0%,
100% {
clip-path: inset(27% 0 0 0);
}
10% {
clip-path: inset(17% 0 0 0);
}
20% {
clip-path: inset(55% 0 0 0);
}
30% {
clip-path: inset(30% 0 0 0);
}
40% {
clip-path: inset(13% 0 0 0);
}
......
省略部分可以前往码上掘金查看完整信息
}
这段动画代码定义了一个名为 up-and-down 的关键帧动画，使用clip-path属性来产生频段的上下跳动的效果。
0%, 100% 定义了动画的起始和结束状态，均使用 clip-path 的 inset 属性，使得元素从向上移动到向下移动的过程。
其他百分比值: 在每个百分比值上，使用 clip-path 的 inset 属性定义了不同的矩形区域，从而使频段在不同百分比的位置表现不同的变化，呈现出上下跳动的效果。
总的来说，通过这些关键帧的定义，动画将在不同的时间点产生不同的 clip-path，使得频段元素呈现出上下跳动的视觉效果，从而实现音频均衡器动画的呈现。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
