MOTION HUB

文字遮罩滚动

Text Mask Scroll
#text-mask-scroll · 64/72
AUTO · 自动演示

参数调改

PLAYGROUND
扫过周期--dur_ms
12008000
ms
高光带宽--band_pct
660
%
文字字号--font_px
2872
px
光带角度--angle_deg
60140
deg
基底字色--mask_a
高光色--mask_b
光晕色--mask_c

实现要点

NOTES
  1. 01

    与流光渐变字的区别:这条的『字面』永远是一个暗色渐变基底(mask_a 占大部分面积),只有一条窄亮带(mask_b/c 组成的 band)在字面内往返扫过——遮罩感来自亮带的位置位移,而不是整块渐变流动。

  2. 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 而非全循环,扫过节奏更自然。

  3. 03

    background-position 动画属于重绘路径,标题级小面积可常驻播放;大段正文或巨幅字请降低频率或改用 transform 方案。

  4. 04

    亮带扫到边缘时字面两端仍是完整暗色渐变——这正是『静止可读』的保障:任意 position 值下文字都是完整的渐变字,亮带只是叠加的层次。

  5. 05

    angle_deg 在 60-140 之间扫出的亮带是斜的,比 90 度正切更有『掠过』的方向感;角度越斜、亮带在字面上的驻留越短。

  6. 06

    无障碍:用 @supports not (background-clip: text) 降级为纯色文字;reduced-motion 下停住动画并把亮带构图定在居中位置(background-position: 50%),静态依然有层次;文字语义不受影响。

源代码

SOURCE

加载源代码…