AUTO · 自动演示
参数调改
PLAYGROUND
光斑色 A--color_a
光斑色 B--color_b
光斑色 C--color_c
基础速度--speed_s
630
模糊半径--blur_px
20120
底色--base
实现要点
NOTES- 01
三个 radial-gradient 光斑各自用不同时长（1x / 1.35x / 0.75x）的 transform 位移缩放做往复运动，速度差让叠加关系持续变化，产生『流动』错觉。
- 02
blur 只挂在容器一层：三个光斑先在容器内合成，再一次模糊，比每斑各加 filter 便宜两倍以上。
- 03
容器 inset:-25% 四周出血，光斑位移到边缘也不会露出硬边；overflow:hidden 由 body 承担。
- 04
mix-blend-mode:screen 让光斑交叠处自然提亮，是『高级氛围感』的主要来源，不需要额外高光层。
- 05
全程只动 transform（合成器路径）；实际页面里建议整块区域 will-change 或独立层，避免模糊层反复重绘；reduced-motion 下光斑静止。
源代码
SOURCE
加载源代码…