悬停变形
指针进入可交互元素时，外环以 1.5 倍缩放包裹目标，250ms 弹性缓动明确传达「可点击」。
Style No.62 · Interactive Cursor
光标即界面，指针即表达
把鼠标指针升级为第一交互元素：悬停时变形放大、靠近按钮时被磁力吸引、移动时留下渐隐拖尾，并以 mix-blend-mode 反色穿越明暗内容。
提示：触屏设备将自动回退为系统指针，功能不受影响。
- 类别通用风格
- 年代2025+ 交互时代
- 复杂度中等
- 最适合创意作品集 · 互动体验 · 代理机构官网
风格特性
三个核心手法共同构成「光标即工具」的体验语言，全部由 CSS 变量驱动：尺寸 20px、悬停缩放 1.5、磁吸半径 100px。
磁吸引力
在 100px 磁吸区内，按钮向指针方向轻微位移，形成被吸附的物理错觉，离开后弹性归位。
光标拖尾
10 枚渐隐粒子以插值跟随主指针，透明度按 0.1 递减，勾勒出移动轨迹与速度感。
按钮与控件
悬停观察光标变形与按钮位移；按下鼠标可见外环收缩并变为点击反馈色。
表单示例
输入框沿用暗面材质，焦点时呈现 3px 荧光焦点环，键盘用户与鼠标用户同样清晰。
配色板
高对比底色保证自定义光标随处可见，三个功能色分别服务强调、磁吸与点击反馈。
#0F0F12夜幕底色#F5F5F7高对比前景#C9F73A光标强调#8B7CFF磁吸指示#FF6B4A点击反馈
字体级阶
光标即语言
指针塑造交互节奏
正文使用 Inter，16px、1.65 倍行高，在深色界面上保持长文本的稳定可读性。
Cursor / Magnetic / Trail