前言

👏实现一个音频loading动画还蛮有趣的，速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

2.实现步骤

• 定义css变量：父容器高度为–h，可以动态设置loading的高度

:root {--h: 80px;}

• 父容器flex横向布局，竖向居中，添加15个span标签（可以自行设置更多的个数，这里展示15个）

//...共15个

.container {display: flex;align-items: center;position: relative;height: var(--h);
}

• span设置圆角，初始高度为 h*20%，圆角为高度的二分之一，设置背景渐变色，span标签间隔4px，最后一个span标签设置右边距为0

.container span {background: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);width: 4px;height: 20%;border-radius: calc(var(--h) * 0.2 * 0.5);margin-right: 4px;
}
.container span:last-child {margin-right: 0px;}

• 修改span标签的高度，实现上下波动

• 为每个span标签设置高度变化的动画，20%到100%的变化，背景渐变色的变化，圆角的变化

@keyframes loading {0% {background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);height: 20%;border-radius: calc(var(--h) * 0.2 * 0.5);}50% {background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);height: 100%;border-radius: calc(var(--h) * 1 * 0.5);}100% {background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);height: 20%;border-radius: calc(var(--h) * 0.2 * 0.5);}
}

• 通过为span标签设置不同的动画延迟，实现此起彼伏的效果
• 由中间向两侧进行波动，15个标签，中间数为第八个，为第八个span设置动画延时为0s，依次向两边增加延迟时间，即总标签数的中间数字不延迟，两侧进行动画延迟

• 按照上述规则为span标签定义css变量–d

//...,6,5,4,3,2,//...,2,3,4,5,6,

• 设置动画延迟，就完成了啦~

.container span {+ animation-delay: calc(0.2s * var(--d));
}

3.实现代码

4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕

更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~