前言
借着前段时间完成了一个关于音乐播放器的项目，所以这次给大家带来一个关于音乐播放的效果。话不多说，大家直接看下面的动态效果预览。
效果预览
HTML 部分
首先看到HTML部分，HTML是整个效果实现的基建相关代码如下。
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
通过HTML定义了一个包含10个span元素的div元素，每个span元素代表加载动画中的一个小块。通过为每个span元素设置不同的样式，可以实现旋转或者闪烁的效果，从而形成一个整体的加载动画。
CSS 部分
然后是 CSS 部分。这里的 CSS 就是为整个效果画龙点睛的，相关代码如下。
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.loader {
width: 6em;
height: 6em;
padding: 3em;
font-size: 10px;
background-color: pink;
border-radius: 50%;
border: 0.8em solid hotpink;
display: flex;
align-items: center;
justify-content: space-between;
animation: loader-animate 1.5s infinite ease-in-out;
}
在这里，body设置了页面的基本样式，包括将内容居中显示在页面中央。.loader类设置了加载动画的样式，包括宽度、高度、内边距、字体大小、背景颜色、边框样式、圆角、显示方式和动画效果。动画效果通过 @keyframes 定义的loader-animate动画实现，设置了1.5秒的动画时长，无限循环，并且采用ease-in-out的缓动函数。
接下来我们看到这段动画的实现方式，相关代码如下。
@keyframes loader-animate {
45%,
55% {
transform: scale(1.05);
}
}
这段代码定义了一个名为loader-animate的关键帧动画。在动画的 45% 和 55% 的时间点，元素会发生缩放，transform属性值为scale(1.05)，即放大1.05倍。这样在动画播放时，元素会在这两个时间点之间发生放大效果。
.loader span {
width: 0.5em;
height: 50%;
background-color: deeppink;
animation: span-animate 1.5s infinite ease-in-out backwards;
animation-delay: calc(var(--n) * 0.05s);
}
@keyframes span-animate {
0%,
100% {
transform: scaleY(0.05) translateX(-0.5em);
}
15% {
transform: scaleY(1.2) translateX(1em);
}
90%,
100% {
background-color: hotpink;
}
}
接下来又是一段动画代码。该动画效果使用了span-animate关键帧动画，定义了元素在不同时间点的变化。在动画中，元素在 0% 和 100% 时高度缩小到0.05倍并向左偏移0.5em，在 15% 时高度变为1.2倍并向右偏移1em，最后在 90% 和 100% 时背景颜色变为hotpink。通过这些变化在不同时间点的组合，可以实现一个有趣的loading动画效果。
.loader span:nth-child(1) {
--n: 1;
}
.loader span:nth-child(2) {
--n: 2;
}
.loader span:nth-child(3) {
--n: 3;
}
......
以下代码省略
这里是为了给一个包含多个span元素的 .loader 元素下的每个span元素设置一个自定义属性 --n 的值。通过 :nth-child() 选择器，分别为每个span元素设置不同的 --n 值，从1到10。这样可以在后续的CSS样式中使用 --n 值来对每个span元素进行不同的样式设置。
最后就是
总结
以上就是整个效果的实现过程了，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
