Cursor

Magnetic Button (磁吸按钮)

别称 Magnetic target, Magnetic hover

指针靠近时元素被吸向指针,离开后又弹回原位。

CTA 按钮、导航图标

  • Magnetic Button
  • Cursor: Magnetic target
  • Codrops magnetic buttons

查看演示源码

提示词

将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。

在[应用位置]添加“磁吸按钮”(Magnetic Button)效果,也叫磁吸目标(magnetic target)或磁吸悬停(magnetic hover)。
指针靠近时,按钮被轻轻吸向指针,按钮文字移动得再多一点;指针离开后,按钮带着一点小弹跳回到原位。
不要让周围布局跟着移动;在触屏设备上,或者如果用户开启了“减少动态效果”(prefers-reduced-motion),就关闭吸附。

将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。