CSS 如何实现文字光影效果？

Question

CSS 如何实现文字光影效果？

仓乃文 · Accepted Answer

文字光影效果通过 background-clip: text 配合移动的渐变背景实现光线扫过文字的动画效果。

```css
.light-text {
  background: linear-gradient(
    90deg,
    #333 0%, #333 40%,
    #fff 50%, #333 60%,
    #333 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: light-sweep 3s ease-in-out infinite;
}

@keyframes light-sweep {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
```

补充说明：
- 渐变中间亮色模拟光线，两侧暗色为文字本色
- background-size: 200% 让渐变宽度为文字两倍，光线有移动空间
- background-position 动画让光线从左到右扫过
- 适合标题文字、Logo 文字等需要视觉冲击的场景