3 分钟学会！波浪文字动画超详细教程，从 0 到 1 实现「思考中 / 加载中」高级效果

超级无敌攻城狮2025-09-10 0:32

前言：为什么要学波浪文字动画？

经常在 AI 聊天框、APP 加载页看到那种文字跟着波浪闪的效果,明明只是简单的亮暗变化，但是感觉瞬间让页面有了呼吸感。

思路

把一句话拆成单个文字（比如 "思考中..." 拆成 "思""考""中""."".""."）
给每个文字加 "亮→暗→亮" 的基础动画
给每个文字设置递增的延迟时间（第 1 个 0 秒开始，第 2 个 0.1 秒，第 3 个 0.2 秒......）

代码实现

HTML

html 复制代码

<div id="waveTextContainer">
  <!-- 每个字符一个span，延迟依次加0.1秒 -->
  <span class="wave-char" style="animation-delay: 0s">思</span>
  <span class="wave-char" style="animation-delay: 0.1s">考</span>
  <span class="wave-char" style="animation-delay: 0.2s">中</span>
  <span class="wave-char" style="animation-delay: 0.3s">.</span>
  <span class="wave-char" style="animation-delay: 0.4s">.</span>
  <span class="wave-char" style="animation-delay: 0.5s">.</span>
</div>

CSS

CSS 复制代码

/* 单个字符的基础样式 */
.wave-char {
    opacity: 0.3;           /* 平时是暗的（30%透明度） */
    color: #333;            /* 暗态颜色（深灰） */
    font-size: 18px;       
    display: inline-block; 
    /* 动画：名字 时长 缓动效果 无限循环 */
    animation: waveAnimation 2s ease-in-out infinite;
}

/* 定义"亮→暗→亮"的动画过程 */
@keyframes waveAnimation {
    0% {
        opacity: 0.3;       /* 开始：暗态 */
        color: #333;
    }
    50% {
        opacity: 1;         /* 中间：完全亮（100%透明度） */
        color: #0084ff;    
    }
    100% {
        opacity: 0.3;       /* 结束：回到暗态，循环 */
        color: #333;
    }
}

JavaScript

javascript 复制代码

// 目标：传入文字，自动生成波浪动画
function createWaveText(text) {
    // 1. 拿到容器
    const container = document.getElementById('waveTextContainer');
    // 2. 先清空容器（避免重复添加）
    container.innerHTML = '';
    // 3. 把文字拆成单个字符的数组
    const charList = text.split('');
    
    // 4. 遍历每个字符，生成span
    charList.forEach((char, index) => {
        const span = document.createElement('span');
        span.textContent = char === ' ' ? '\u00A0' : char;
        // 加样式类
        span.className = 'wave-char';
        // 关键：延迟时间 = 索引 * 0.1秒
        span.style.animationDelay = `${index * 0.1}s`;
        // 把span放进容器
        container.appendChild(span);
    });
}

// 调用函数
createWaveText('思考中...');