ADVANCED CURSOR INTERACTION
自定义光标 · 惯性跟随 · 磁性按钮 · 聚光灯 · 3D 视差 · 弹簧物理
按钮被光标吸引,内层文字位移更大——双层磁性,营造出"拉扯"的空间感。
卡片用 radial-gradient 高光跟踪光标位置,像一束光在表面扫过。
全部用 rAF 驱动 + CSS 变量写入,无布局抖动;transform 走 GPU 合成层。
光标位置按帧向鼠标真实位置收敛,产生惯性跟手的手感,而非生硬贴附。
光标使用 mix-blend-mode: difference,划过任何颜色都会自动反色显示。
把鼠标在卡片上的相对位置映射成 rotateX / rotateY,内部元素用 translateZ 分层。
背景光晕、文字、角标分别位于不同 Z 深度,随卡片一起转动,形成视差。
小球用弹簧公式(F = k·Δx 加阻尼)追光标,速度越快拉伸越明显——squash & stretch 是动画的十二原则之一。