如何使用CSS实现鼠标悬停文本时逐字渐变变色效果？

嘿，这个效果挺有意思的！你之前用CSS没成功，大概率是因为没把每个字母单独拆分出来——直接给整个单词加动画的话，所有字母会一起变色，没法实现依次触发的效果。我给你整理了一个纯CSS的可行方案，你可以试试：

HTML 结构 #

首先需要把单词里的每个字母都用 <span> 标签单独包裹起来，这样才能给每个字母设置独立的动画延迟：

<p class="color-word">
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
</p>

CSS 实现 #

接下来定义动画和悬停触发逻辑：

/* 基础样式，可根据需求调整 */
.color-word {
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

/* 定义变色动画：红 → 粉 → 绿 */
@keyframes colorShift {
  0% { color: red; }
  50% { color: pink; }
  100% { color: green; }
}

/* 悬停时给每个字母应用动画 */
.color-word:hover span {
  animation: colorShift 1.5s forwards;
}

/* 给每个字母设置递增的动画延迟，实现依次变色 */
.color-word:hover span:nth-child(1) { animation-delay: 0s; }
.color-word:hover span:nth-child(2) { animation-delay: 0.2s; }
.color-word:hover span:nth-child(3) { animation-delay: 0.4s; }
.color-word:hover span:nth-child(4) { animation-delay: 0.6s; }
.color-word:hover span:nth-child(5) { animation-delay: 0.8s; }

效果说明 #

• @keyframes colorShift 定义了颜色从红色到粉色再到绿色的渐变过程，forwards 属性让动画结束后停在最后一帧的颜色（也就是绿色）。
• 通过 nth-child 给每个 <span> 设置不同的 animation-delay，这样鼠标悬停时，字母就会从左到右依次触发变色动画啦。

小提示 #

如果你的单词很长，手动写每个 <span> 太麻烦，可以用一小段JS自动拆分字母：

const wordElement = document.querySelector('.color-word');
const text = wordElement.textContent;
wordElement.innerHTML = text.split('').map(letter => `<span>${letter}</span>`).join('');

这样不管单词多长，都能自动把每个字母包裹成 <span>，省不少事~

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