磁吸按钮 · Magnetic Button
英文：Magnetic Button
动效与交互难度：入门 ★
🗣️一句话大白话
鼠标靠近时按钮被“吸”向光标，离开后回弹原位。落地页 CTA 的“高级感”细节，比静止按钮有生命。磁吸的实现：监听鼠标位置，按钮中心向光标偏移（通常 10-30px，带缓动），离开时归位。告诉 AI“按钮朝光标方向偏移 20%、200ms 缓动回弹”即可。要点：偏移别超过按钮自身尺寸的 30%（会脱离位置预期），且只增强不替代（移动端无 hover）。
🖼️样图参考
🎬真实场景
CTA 按钮、导航按钮、落地页主操作
📮你可以这样说
「【图像模型版】让 [CTA 按钮] 带磁吸效果：鼠标靠近时按钮朝光标偏移约 20%，远离后 200ms 平滑归位；按钮周围留 40px 感应区。 【HTML/CSS/JS 版】[按钮] mousemove 时计算相对位移，transform: translate(dx, dy) 带 lerp 缓动（系数 0.15），mouseleave 归位。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：磁吸=按钮跟着鼠标到处跑；实际只在感应区内小偏移
- ▸偏移超过按钮尺寸 30% 会脱离预期位置
🚫什么时候别用
- ✗移动端（无 hover）
- ✗表单/对话框等需要精确点击的区域
🧩常见变体
按钮磁吸图标磁吸感应区+回弹
💡小贴士
- ✦偏移 10-30px 刚刚好；配 spring 回弹更高级
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（中篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗