前端实现音频播放中动画（四个竖线动态变化）

原创

已于 2024-12-25 09:29:23 修改 · 485 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html5 #音视频 #css

于 2024-12-24 21:30:29 首次发布

该文章已生成可运行项目，

以下代码直接复制在html文件中使用即可。

实现思路：

每个 <span> 元素通过被赋予不同的动画名称（分别关联各自对应的 @keyframes 规则），在同一时间按照各自设定好的高度变化关键帧逻辑进行动画播放。由于它们都设置了 animation-iteration-count: infinite（无限循环）以及相同的 animation-duration: 0.5s（动画周期时长）和 animation-timing-function: linear（线性播放速度）等属性，所以在 broadcast 容器内，这 4 个 <span> 元素会持续、同步且协调地进行各自独特又相互配合的高度变化动画，形成一种类似彩色条纹闪烁、伸缩的音频播放中动态视觉效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>broadcast</title>
    <style>
      .broadcast {
        width: 160px;
        height: 160px;
        align-items: center;
        display: inline-flex;
        justify-content: space-evenly;
      }

      .broadcast > span {
        animation-direction: alternate;

本文章已经生成可运行项目