提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“上浮”(Float)悬停效果,也叫抬升(lift)或升起(raise)。
指针停在元素上时,元素轻轻向上浮起并保持,指针移开后再落回:平滑柔和,没有回弹。
只做视觉上的移动,不要挤动周围的布局,键盘焦点时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
Bob (上下浮动)
别称 Hang
悬停期间,元素先向上浮起,然后持续上下轻轻浮动。
适用场景
图标、按钮
在[应用位置]添加“上下浮动”(Bob)悬停效果,也叫悬挂(hang)。
元素先轻轻浮起,指针停留期间持续柔和地上下浮动,指针移开后再落回原位:缓慢而柔和。
只在悬停期间循环浮动;如果用户开启了“减少动态效果”(prefers-reduced-motion),则保持静止。A
将鼠标悬停在上面
Hover Shadow (悬停阴影)
别称 Drop Shadow on hover, Elevation on hover
悬停时元素下方出现或加深一层柔和阴影,营造抬升感。
适用场景
卡片、按钮
在[应用位置]添加“悬停阴影”(Hover Shadow)效果,也叫 drop shadow on hover 或 elevation on hover。
指针悬停时,元素下方的柔和阴影加深并扩散,让它看起来被抬起;指针离开后再淡回原样,元素本身保持不动。
阴影要足够含蓄,在浅色和深色主题下都合适;键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
悬停时,元素向下移动几个像素,仿佛被按进页面里。
适用场景
按钮
在[应用位置]添加“下沉”(Sink)悬停效果。
指针停在元素上时,元素略微下移并保持住,仿佛被按进页面里,移开后再升回原位:平滑,没有回弹。
只在视觉上移动,不要让周围的布局发生位移,键盘焦点时也显示同样的效果。将鼠标悬停在上面
Nudge Forward / Backward (前后轻推)
别称 Arrow nudge
悬停时箭头或元素本身向前或向后滑动几个像素。
适用场景
下一页/上一页链接、箭头
在[应用位置]添加“前后轻推”(Nudge Forward / Backward)悬停效果,也叫 arrow nudge。
指针悬停时,箭头朝它所指的方向轻轻滑动一小段,指针离开后滑回:快速、幅度小。
只移动箭头,不要让文字或布局跟着偏移;键盘聚焦时也显示同样的效果。Hover 中的其他动效
ABC
移动指针试试
Focus Cards (聚焦卡片)
别称 Blur siblings on hover, Hover focus blur, Card hover effect
悬停的卡片保持清晰,其余卡片变得模糊、变暗。
适用场景
卡片网格、画廊
在[应用位置]添加“聚焦卡片”(Focus Cards)效果,也叫悬停时模糊其他卡片(blur siblings on hover)、悬停聚焦模糊(hover focus blur)或卡片悬停效果(card hover effect)。
指针停在某张卡片上时,其他卡片变模糊、变暗并略微缩小,悬停的卡片保持清晰;整个过程平滑过渡,指针移开后恢复原样。
键盘焦点时也采用同样的聚焦效果;没有悬停任何卡片时,所有卡片都保持清晰可读。A
将鼠标悬停在上面
Glow (发光)
别称 Neon glow
悬停时,元素周围出现一圈彩色光晕。
适用场景
按钮、卡片、图标
在[应用位置]添加“发光”(Glow)悬停效果,也叫霓虹光晕(neon glow)。
指针停在元素上时,元素周围淡入一圈柔和的彩色光晕,移开后淡出:柔和,不带位移。
光晕不要影响布局,键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Grow (放大)
别称 Scale Up, Zoom In on hover
指针停在元素上时,元素平滑地略微放大。
适用场景
按钮、链接、缩略图
在[应用位置]添加“放大”(Grow)悬停效果,也叫放大缩放(scale up)。
指针停在元素上时,元素平滑地略微放大,移开后恢复原来大小:快速而含蓄。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。