实现多元素文本波动动画：从ID到Class的JavaScript与CSS实践

/**
 * 将指定元素的文本内容拆分为带动画效果的<span>标签。
 * @param {HTMLElement|string} elementOrSelector - 目标DOM元素或CSS选择器。
 */
const wiggle = (elementOrSelector) => {
  // 根据输入类型获取DOM元素
  const element = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector) // 如果是字符串，则查询第一个匹配的元素
    : elementOrSelector; // 否则直接使用传入的元素

  // 确保元素存在
  if (!element) {
    console.warn('Wiggle function: Target element not found.', elementOrSelector);
    return;
  }

  const text = element.textContent; // 获取原始文本内容
  element.textContent = ''; // 清空原始内容，准备插入新的<span>

  // 遍历字符，生成带有自定义CSS变量的<span>标签
  element.innerHTML = text.split('').reduce((html, char, index) =>
    // --n 变量用于控制每个字符的动画延迟，例如 10 * index - 10000ms
    (html + `<span style="--n:${10 * index - 10000}ms;">${char}</span>`), '');
};

/**
 * 对所有带有'wiggle'类的元素应用动画。
 */
const wiggleAll = () => {
  document.querySelectorAll('.wiggle').forEach(wiggle);
};

// 页面加载后自动对所有'.wiggle'元素应用动画
wiggleAll();

// 也可以手动对特定元素应用动画，例如：
// wiggle('.wiggle-single');

@keyframes wave {
  0%   { top:  0px; }
  25%  { top: -4px; }
  50%  { top:  0px; }
  75%  { top:  4px; }
  100% { top:  0px; }
}

/* 方案一：通过父元素的类名来定位其子<span> */
.wiggle span {
  animation-delay: var(--n); /* 使用JavaScript设置的自定义属性作为动画延迟 */
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative; /* 确保top属性能够生效 */
}

<h1 class="wiggle">这段文字会波动...</h1>

<h2>而这段文字则不会...</h2>

<h1 class="wiggle">...但这段也会波动。</h1>

<h1 class="wiggle-single">手动指定的波动文字...</h1>

const wiggle = (elementOrSelector) => {
  const element = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector)
    : elementOrSelector;

  if (!element) {
    console.warn('Wiggle function: Target element not found.', elementOrSelector);
    return;
  }

  const text = element.textContent;
  element.textContent = '';
  element.innerHTML = text.split('').reduce((html, char, index) =>
    // 添加 class="wiggler"
    (html + `<span class="wiggler" style="--n:${10 * index - 10000}ms;">${char}</span>`), '');
};

// 其余的 wiggleAll() 和调用方式保持不变
const wiggleAll = () => {
  document.querySelectorAll('.wiggle').forEach(wiggle);
}
wiggleAll();
// wiggle('.wiggle-single');

/* 方案二：直接通过<span>自身的类名来定位 */
.wiggler {
  animation-delay: var(--n);
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative;
}