AUTO · 自动演示
参数调改
PLAYGROUND
光斑色--spot_color
光斑直径--spot_px
180620
光斑强度--spot_opacity
0.20.85
跟随柔度--lerp
0.030.3
底色--base
实现要点
NOTES- 01
光斑位置全走 CSS 变量 --lx/--ly + transform:translate 合成器路径,JS 每帧只写两个变量,不触发布局与重绘。
- 02
lerp 线性插值让光斑『滑』向目标而不是瞬移:--lerp 越小跟随越绵软、越大越跟手;0.03-0.3 都有意义,低于 0.02 会明显发飘。
- 03
光斑是 radial-gradient(closest-side, 色, transparent 68%) 配 screen 混合叠在暗底上,边缘自然消散;底层还有一层极淡的静态环境光 wash,任何帧都不是纯黑。
- 04
空闲 2.6s 后目标点改走一条缓动的 Lissajous 轨迹自动游走(预览演示用),用户一移动光标立即交还控制权。
- 05
reduced-motion 下不启动 rAF 循环、不监听 pointermove,光斑静止在初始位置;生产环境按需保留真实跟随、去掉自动游走。
源代码
SOURCE
加载源代码…