AUTO · 自动演示
参数调改
PLAYGROUND
网格间距--grid_size
2490
网格线色--grid_color
脉冲线色--grid_hot
脉冲周期--pulse_s
2.510
底色--base
实现要点
NOTES- 01
网格用横竖两组 linear-gradient 1px 线 + background-size 平铺;线色带透明度(约 0.14)而不是纯白,密度一高纯白线会闪。
- 02
脉冲核心是 @property 把 --pulse_r 注册成 <percentage>,让自定义属性可以插值;mask 的 radial-gradient 用它当半径,亮区从中心扩散到 88% 再收回。
- 03
mask 动画逐帧重绘(paint),但只作用于单层网格、面积固定,成本可控;不要同时动画 background-position 或多层叠加脉冲。
- 04
不支持 @property 的环境:动画失效,--pulse_r 落到 :root 的回退值 26%,脉冲退化为常驻亮区,网格依然完整可读。
- 05
中心静态辉光是常显基线;reduced-motion 下停用脉冲,保留静态网格 + 亮区。
源代码
SOURCE
加载源代码…