字母Wobble抖动效果实现求助：现有代码无法正常运行

常见问题排查与修复 #

先梳理几个最可能导致效果失效的核心原因，再给出完整可运行的代码示例：

• 未将文本拆分为单个字母的独立元素，无法单独控制每个字符的动画
• 未定义wobble关键帧动画，或悬停放大的CSS过渡效果缺失
• JavaScript事件监听未正确绑定到每个字母元素，或动画触发逻辑存在问题

完整可运行代码示例 #

HTML #

<div class="text-container">
  Hello Wobble
</div>

CSS #

.text-container {
  font-size: 2rem;
  font-weight: bold;
}

.text-container span {
  display: inline-block;
  transition: transform 0.3s ease;
  margin: 0 2px;
}

.text-container span:hover {
  transform: scale(1.3);
}

/* 定义Wobble抖动动画 */
@keyframes wobble {
  0%, 100% { transform: rotate(0deg) scale(1.3); }
  25% { transform: rotate(-5deg) scale(1.3); }
  50% { transform: rotate(5deg) scale(1.3); }
  75% { transform: rotate(-3deg) scale(1.3); }
}

.wobble-active {
  animation: wobble 0.5s ease-in-out;
}

JavaScript #

// 获取文本容器元素
const textContainer = document.querySelector('.text-container');
// 提取容器内的文本内容
const originalText = textContainer.textContent.trim();
// 清空容器原有内容
textContainer.innerHTML = '';

// 将每个字符拆分为独立span元素
originalText.split('').forEach(char => {
  const charSpan = document.createElement('span');
  // 处理空格，避免span元素折叠
  charSpan.textContent = char === ' ' ? '\u00A0' : char;
  
  // 鼠标悬停触发抖动动画
  charSpan.addEventListener('mouseenter', () => {
    // 先移除动画类，强制浏览器重绘后再添加，解决重复触发失效问题
    charSpan.classList.remove('wobble-active');
    void charSpan.offsetWidth;
    charSpan.classList.add('wobble-active');
  });
  
  // 鼠标离开移除动画类
  charSpan.addEventListener('mouseleave', () => {
    charSpan.classList.remove('wobble-active');
  });
  
  textContainer.appendChild(charSpan);
});

关键细节说明 #

• 独立字母元素：用<span>包裹每个字符，确保能单独为每个字母添加动画和交互效果
• 动画触发修复：通过void charSpan.offsetWidth强制浏览器重绘，解决重复悬停时动画不触发的问题
• 空格处理：将普通空格替换为非断空格\u00A0，保证空格位置的span元素正常显示

内容的提问来源于stack exchange，提问作者Kris