自定义Hover彩虹文字CSS类开发需求及现有代码求助

我来帮你搞定这个彩虹字母hover效果！完全贴合你提的三个需求，下面是调整后的完整代码和说明：

• 自定义名为rainbow的CSS类，可按需应用到任意文本容器
• 单个字母在hover时循环切换彩虹渐变色彩
• 过渡效果：hover时立即触发动画（0ms进入），鼠标离开后300ms平滑淡出到初始颜色

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="rainbow">
  <span style="color: hsl(0, 100%, 50%);">L</span>
  <span style="color: hsl(4, 100%, 50%);">o</span>
  <span style="color: hsl(7, 100%, 50%);">r</span>
  <span style="color: hsl(10, 100%, 50%);">e</span>
  <span style="color: hsl(13, 100%, 50%);">m</span>
  <span style="color: hsl(16, 100%, 50%);"> </span>
  <span style="color: hsl(19, 100%, 50%);">i</span>
  <span style="color: hsl(23, 100%, 50%);">p</span>
  <span style="color: hsl(26, 100%, 50%);">s</span>
  <span style="color: hsl(29, 100%, 50%);">u</span>
  <span style="color: hsl(32, 100%, 50%);">m</span>
  <span style="color: hsl(35, 100%, 50%);"> </span>
  <span style="color: hsl(38, 100%, 50%);">d</span>
  <span style="color: hsl(42, 100%, 50%);">o</span>
  <span style="color: hsl(45, 100%, 50%);">l</span>
  <span style="color: hsl(48, 100%, 50%);">o</span>
  <span style="color: hsl(51, 100%, 50%);">r</span>
  <span style="color: hsl(54, 100%, 50%);"> </span>
  <span style="color: hsl(57, 100%, 50%);">s</span>
  <span style="color: hsl(60, 100%, 50%);">i</span>
  <span style="color: hsl(64, 100%, 50%);">t</span>
  <span style="color: hsl(67, 100%, 50%);"> </span>
  <span style="color: hsl(70, 100%, 50%);">a</span>
  <span style="color: hsl(73, 100%, 50%);">m</span>
  <span style="color: hsl(76, 100%, 50%);">e</span>
  <span style="color: hsl(79, 100%, 50%);">t</span>
  <span style="color: hsl(83, 100%, 50%);">,</span>
  <span style="color: hsl(86, 100%, 50%);"> </span>
  <span style="color: hsl(89, 100%, 50%);">c</span>
  <span style="color: hsl(92, 100%, 50%);">o</span>
  <span style="color: hsl(95, 100%, 50%);">n</span>
  <span style="color: hsl(98, 100%, 50%);">s</span>
  <span style="color: hsl(102, 100%, 50%);">e</span>
  <span style="color: hsl(105, 100%, 50%);">c</span>
  <span style="color: hsl(108, 100%, 50%);">t</span>
  <span style="color: hsl(111, 100%, 50%);">e</span>
  <span style="color: hsl(114, 100%, 50%);">t</span>
  <span style="color: hsl(117, 100%, 50%);">u</span>
  <span style="color: hsl(120, 100%, 50%);">r</span>
</p>

CSS #

/* 基础样式：给每个字母添加淡出过渡 */
.rainbow span {
  transition: color 300ms ease-out 0s; /* 300ms淡出效果 */
}

/* hover时触发彩虹动画，0ms立即进入 */
.rainbow:hover span {
  -webkit-animation: colorRotate 6s linear 0s infinite;
  -moz-animation: colorRotate 6s linear 0s infinite;
  -o-animation: colorRotate 6s linear 0s infinite;
  animation: colorRotate 6s linear 0s infinite;
  transition: none; /* hover时取消过渡，立即启动动画 */
}

/* 彩虹渐变动画关键帧 */
@-webkit-keyframes colorRotate {
 from { color: rgb(255, 0, 0); }
 16.6% { color: rgb(255, 0, 255); }
 33.3% { color: rgb(0, 0, 255); }
 50% { color: rgb(0, 255, 255); }
 66.6% { color: rgb(0, 255, 0); }
 83.3% { color: rgb(255, 255, 0); }
 to { color: rgb(255, 0, 0); }
}
@-moz-keyframes colorRotate {
 from { color: rgb(255, 0, 0); }
 16.6% { color: rgb(255, 0, 255); }
 33.3% { color: rgb(0, 0, 255); }
 50% { color: rgb(0, 255, 255); }
 66.6% { color: rgb(0, 255, 0); }
 83.3% { color: rgb(255, 255, 0); }
 to { color: rgb(255, 0, 0); }
}
@-o-keyframes colorRotate {
 from { color: rgb(255, 0, 0); }
 16.6% { color: rgb(255, 0, 255); }
 33.3% { color: rgb(0, 0, 255); }
 50% { color: rgb(0, 255, 255); }
 66.6% { color: rgb(0, 255, 0); }
 83.3% { color: rgb(255, 255, 0); }
 to { color: rgb(255, 0, 0); }
}
@keyframes colorRotate {
 from { color: rgb(255, 0, 0); }
 16.6% { color: rgb(255, 0, 255); }
 33.3% { color: rgb(0, 0, 255); }
 50% { color: rgb(0, 255, 255); }
 66.6% { color: rgb(0, 255, 0); }
 83.3% { color: rgb(255, 255, 0); }
 to { color: rgb(255, 0, 0); }
}

JavaScript #

// 给每个span元素添加动画延迟，让字母的彩虹动画错开，更有层次感
var animTime = 6, // 动画周期（秒）
    hueChange = 3, // 每个字母之间的色相偏移量
    prefixes = ["","-webkit-","-moz-","-o-"],
    numPrefixes = prefixes.length;

$('.rainbow').find('span').each(function (i) {
  for (var j=0;j<numPrefixes;j++) {
    $(this).css(prefixes[j]+'animation-delay', (animTime * ((i * hueChange) % 360) / 360) - animTime + 's');
  }
});

1. 把原代码中的unicorn类统一替换为rainbow，完全符合你的命名要求
2. 在.rainbow span中添加了transition: color 300ms ease-out，实现鼠标离开时的300ms淡出效果
3. 在.rainbow:hover span中设置transition: none，确保hover时动画立即触发（0ms进入）
4. 保留了原有的动画延迟逻辑，让每个字母的彩虹渐变错开，视觉效果更生动

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