MOTION HUB

网格脉冲

Grid Pulse
#grid-pulse · 22/72
AUTO · 自动演示

参数调改

PLAYGROUND
网格间距--grid_size
2490
px
网格线色--grid_color
脉冲线色--grid_hot
脉冲周期--pulse_s
2.510
s
底色--base

实现要点

NOTES
  1. 01

    网格用横竖两组 linear-gradient 1px 线 + background-size 平铺;线色带透明度(约 0.14)而不是纯白,密度一高纯白线会闪。

  2. 02

    脉冲核心是 @property 把 --pulse_r 注册成 <percentage>,让自定义属性可以插值;mask 的 radial-gradient 用它当半径,亮区从中心扩散到 88% 再收回。

  3. 03

    mask 动画逐帧重绘(paint),但只作用于单层网格、面积固定,成本可控;不要同时动画 background-position 或多层叠加脉冲。

  4. 04

    不支持 @property 的环境:动画失效,--pulse_r 落到 :root 的回退值 26%,脉冲退化为常驻亮区,网格依然完整可读。

  5. 05

    中心静态辉光是常显基线;reduced-motion 下停用脉冲,保留静态网格 + 亮区。

源代码

SOURCE

加载源代码…