AUTO · 自动演示
参数调改
PLAYGROUND
扫过周期--dur_ms
12008000
高光带宽--band_pct
660
文字字号--font_px
2872
光带角度--angle_deg
60140
基底字色--mask_a
高光色--mask_b
光晕色--mask_c
实现要点
NOTES- 01
与流光渐变字的区别:这条的『字面』永远是一个暗色渐变基底(mask_a 占大部分面积),只有一条窄亮带(mask_b/c 组成的 band)在字面内往返扫过——遮罩感来自亮带的位置位移,而不是整块渐变流动。
- 02
三段式渐变 (a … b … c … a):暗基底里嵌一条 50% 居中的亮带,band_pct 控制亮带宽度——停靠点必须写成 calc(50% ± band * 1% / 2)(乘 1% 换算成百分比),直接写 calc(50% - band / 2) 是『百分比减数字』的无效 calc,整条渐变会被丢弃、透明文字当场隐形;background-size: 300% 让亮带在 0% ↔ 100% 的 position 区间内只扫过字面一部分,往返用 alternate 而非全循环,扫过节奏更自然。
- 03
background-position 动画属于重绘路径,标题级小面积可常驻播放;大段正文或巨幅字请降低频率或改用 transform 方案。
- 04
亮带扫到边缘时字面两端仍是完整暗色渐变——这正是『静止可读』的保障:任意 position 值下文字都是完整的渐变字,亮带只是叠加的层次。
- 05
angle_deg 在 60-140 之间扫出的亮带是斜的,比 90 度正切更有『掠过』的方向感;角度越斜、亮带在字面上的驻留越短。
- 06
无障碍:用 @supports not (background-clip: text) 降级为纯色文字;reduced-motion 下停住动画并把亮带构图定在居中位置(background-position: 50%),静态依然有层次;文字语义不受影响。
源代码
SOURCE
加载源代码…