MOTION HUB

光标光环

Cursor Glow
#cursor-glow · 09/72
MOVE · 移动交互

参数调改

PLAYGROUND
光环颜色--glow_color
光环直径--glow_px
120460
px
光环强度--glow_opacity
0.150.9
环带厚度--ring_pct
430
%
跟随柔度--lerp
0.030.3

实现要点

NOTES
  1. 01

    位置全走 CSS 变量 --lx/--ly + transform:translate 合成器路径,JS 每帧只写两个变量,不触发布局与重绘。

  2. 02

    lerp 线性插值产生『滑行』惯性:--lerp 越小跟随越绵软、越大越跟手;低于 0.02 明显发飘,高于 0.3 接近瞬移。

  3. 03

    光环是单层 radial-gradient 环带:72% 处为峰值、两侧各 --ring_pct% 柔边(渐变色标里用 calc 实现),mix-blend-mode:screen 叠在暗底上自然发光;调 --ring_pct 即调环带厚薄。

  4. 04

    光环 pointer-events:none 且置于文字下层,不挡任何交互;文字保持常亮可读,光环只做氛围加分。

  5. 05

    预览空闲演示:光标静置约 3s 后目标点改走 Lissajous 缓动轨迹自动游走,用户一移动立即交还控制权。

  6. 06

    reduced-motion:停用自动游走与插值延迟,光标动时光环即时定位;触屏拖动同样生效(pointer 事件天然支持)。

源代码

SOURCE

加载源代码…