MOVE · 移动交互
参数调改
PLAYGROUND
光环颜色--glow_color
光环直径--glow_px
120460
光环强度--glow_opacity
0.150.9
环带厚度--ring_pct
430
跟随柔度--lerp
0.030.3
实现要点
NOTES- 01
位置全走 CSS 变量 --lx/--ly + transform:translate 合成器路径,JS 每帧只写两个变量,不触发布局与重绘。
- 02
lerp 线性插值产生『滑行』惯性:--lerp 越小跟随越绵软、越大越跟手;低于 0.02 明显发飘,高于 0.3 接近瞬移。
- 03
光环是单层 radial-gradient 环带:72% 处为峰值、两侧各 --ring_pct% 柔边(渐变色标里用 calc 实现),mix-blend-mode:screen 叠在暗底上自然发光;调 --ring_pct 即调环带厚薄。
- 04
光环 pointer-events:none 且置于文字下层,不挡任何交互;文字保持常亮可读,光环只做氛围加分。
- 05
预览空闲演示:光标静置约 3s 后目标点改走 Lissajous 缓动轨迹自动游走,用户一移动立即交还控制权。
- 06
reduced-motion:停用自动游走与插值延迟,光标动时光环即时定位;触屏拖动同样生效(pointer 事件天然支持)。
源代码
SOURCE
加载源代码…