CSS3动画：生成一个录音线条波浪形动画

作者：Terry2026.02.26来源：Web前端之家浏览：18评论:0

关键词：CSS3动画

用 css3 实现一个由竖线组成的波浪形动画效果，其中线条有长短变化并呈现出波浪式的动态效果。

实现思路

首先创建一组竖线元素，作为波浪动画的基础视觉单元
使用 CSS3 的 Animation 属性结合 keyframes 定义每个线条的高度变化动画
为不同位置的线条设置不同的动画延迟，形成波浪推进的视觉效果
通过调整动画时长、延迟和高度变化范围，匹配参考图形的波浪形态

完整实现代码

<!DOCtype html>
<HTML lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线条波浪动画 - Web前端之家</title>
    <style>
        /* 容器样式 - 居中展示 */
        .wave-contAIner {
            display: flex;
            align-items: center;
            gap: 4px; /* 线条之间的间距 */
            height: 26px; /* 容器高度，决定线条最大高度 */
            padding: 20px;
            background-color: #f5f5f5;
            width: fit-content;
            margin: 50px auto;
        }

        /* 单个线条样式 */
        .wave-line {
            width: 4px; /* 线条宽度 */
            background-color: #999; /* 线条颜色 */
            border-radius: 2px; /* 线条圆角 */
            animation: wave-animation 1.5s ease-in-out infinite;
        }

        /* 定义波浪动画关键帧 */
        @keyframes wave-animation {
            0%, 100% { height: 10px; }  /* 起始和结束高度 */
            25% { height: 25px; }       /* 波峰高度 */
            50% { height: 15px; }       /* 中间高度 */
            75% { height: 20px; }       /* 次波峰高度 */
        }

        /* 为每个线条设置不同的动画延迟，形成波浪效果 */
        .wave-line:nth-child(1) { animation-delay: 0s; }
        .wave-line:nth-child(2) { animation-delay: 0.1s; }
        .wave-line:nth-child(3) { animation-delay: 0.2s; }
        .wave-line:nth-child(4) { animation-delay: 0.3s; }
        .wave-line:nth-child(5) { animation-delay: 0.4s; }
        .wave-line:nth-child(6) { animation-delay: 0.5s; }
        .wave-line:nth-child(7) { animation-delay: 0.6s; }
        .wave-line:nth-child(8) { animation-delay: 0.7s; }
        .wave-line:nth-child(9) { animation-delay: 0.8s; }
        .wave-line:nth-child(10) { animation-delay: 0.9s; }
    </style>
</head>
<body>
    <!-- 波浪线条容器 -->
    <div class="wave-container">
        <div class="wave-line"></div>
        <div class="wave-line"></div>
        <div class="wave-line"></div>
        <div class="wave-line"></div>
        <div class="wave-line"></div>
        <div class="wave-line"></div>
        <div class="wave-line"></div>
        <div class="wave-line"></div>
        <div class="wave-line"></div>
        <div class="wave-line"></div>
    </div>
</body>
</html>