CSS 如何实现文字随机颜色？

Question

CSS 如何实现文字随机颜色？

仓乃文 · Accepted Answer

纯 CSS 无法生成真正的随机值，但可以通过 animation-delay 给每个字符设置不同延迟，配合 hue-rotate 或渐变动画，让不同字符在不同时间点显示不同颜色，产生随机色彩的视觉效果。

```css
.random-color span {
  display: inline-block;
  animation: colorShift 3s infinite;
}

.random-color span:nth-child(1) { animation-delay: 0s; }
.random-color span:nth-child(2) { animation-delay: 0.1s; }
.random-color span:nth-child(3) { animation-delay: 0.2s; }
.random-color span:nth-child(4) { animation-delay: 0.3s; }
.random-color span:nth-child(5) { animation-delay: 0.4s; }

@keyframes colorShift {
  0% { color: #ff6b6b; }
  25% { color: #feca57; }
  50% { color: #48dbfb; }
  75% { color: #ff9ff3; }
  100% { color: #ff6b6b; }
}
```

SASS 生成：
```scss
@for $i from 1 through 20 {
  .random-color span:nth-child(#{$i}) {
    animation-delay: #{$i * 0.08}s;
  }
}
```

补充说明：
- 每个字符包裹在 span 中，设置不同 animation-delay
- 动画循环播放颜色变化，不同延迟让各字符处于不同颜色阶段
- 延迟间隔越小颜色变化越微妙，越大越跳跃
- 适合创意标题、Logo 文字等场景