MOVE · 移动交互
参数调改
PLAYGROUND
照亮字色--lit_color
暗态字色--dim_color
光斑半径--spot_px
80360
光斑羽化--feather_pct
3595
实现要点
NOTES- 01
单层 radial-gradient + background-clip:text:亮色到暗色在同一张渐变里完成,光斑即文字显色,不需要第二层遮罩元素。
- 02
--mx/--my 存的是相对每个文字盒的局部坐标(JS 用各自 rect 换算后写在元素上),标题与副标题两块文字被同一束 viewport 坐标的光统一照亮。
- 03
background-clip:text 需要 -webkit- 前缀兜底;@supports 不满足时降级为纯色文字,内容始终可读。
- 04
feather_pct 控制亮暗过渡带在渐变里的位置:越大光斑边缘越『硬』、越小越朦胧;spot_px 是光斑半径(circle 尺寸)。
- 05
跟随用 0.12 固定插值,略带延迟像真实手电;dim 色不要用纯黑,保留一点字面轮廓保证静息态可读。
- 06
reduced-motion:不做自动游走,光标动时光斑即时定位;触屏拖动同样生效。
源代码
SOURCE
加载源代码…