Hover Action
前端特效
收集常用前端动效模板，快速查看效果方向并沉淀为可复用实现思路。
鼠标交互前端特效模板
磁吸悬停按钮
适合主按钮、工具栏按钮和强调操作， hover 时形成轻微吸附反馈。
详情
Hover Action
- 监听指针进入和移动，根据按钮中心点计算偏移量。
- 只更新 transform 和 box-shadow，离开后用 spring 或 transition 回弹。
- 移动端回退为普通 hover/active 反馈，不依赖鼠标坐标。
提示词
请在当前 React/Next.js 项目中实现「磁吸悬停按钮」前端特效。 使用场景： 适合主按钮、工具栏按钮和强调操作， hover 时形成轻微吸附反馈。 实现要求： - 保持现有页面结构、设计系统和响应式规则，不新增无关依赖。 - 动效优先使用 transform、opacity、CSS 变量或现有 motion 能力，避免频繁改 width、height、top、left。 - 桌面端要有清晰 hover/focus 状态，移动端要有合理降级。 - 控制动画时长和节奏，补充 prefers-reduced-motion 降级。 - 输出完整可运行的组件和样式代码，并解释关键参数。