提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“程序坞放大”(Dock Magnification)效果,也叫程序坞(dock)。
指针越靠近,这一排图标就平滑地放大,最近的图标最大、相邻的图标稍微放大;指针移开后全部恢复原来大小。
图标从固定的基线向上放大;在触摸和键盘操作时,每个图标都要以正常大小正常可用。相似的动效
A
将鼠标悬停在上面
Grow (放大)
别称 Scale Up, Zoom In on hover
指针停在元素上时,元素平滑地略微放大。
适用场景
按钮、链接、缩略图
在[应用位置]添加“放大”(Grow)悬停效果,也叫放大缩放(scale up)。
指针停在元素上时,元素平滑地略微放大,移开后恢复原来大小:快速而含蓄。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。A
移动指针试试
Magnetic Button (磁吸按钮)
别称 Magnetic target, Magnetic hover
指针靠近时元素被吸向指针,离开后又弹回原位。
适用场景
CTA 按钮、导航图标
在[应用位置]添加“磁吸按钮”(Magnetic Button)效果,也叫磁吸目标(magnetic target)或磁吸悬停(magnetic hover)。
指针靠近时,按钮被轻轻吸向指针,按钮文字移动得再多一点;指针离开后,按钮带着一点小弹跳回到原位。
不要让周围布局跟着移动;在触屏设备上,或者如果用户开启了“减少动态效果”(prefers-reduced-motion),就关闭吸附。将鼠标悬停在上面
Hover Zoom (图片悬停放大)
别称 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
悬停时图片在框内放大,有时还会随指针平移。
适用场景
产品卡片、缩略图
在[应用位置]添加“图片悬停放大”(Hover Zoom)效果,也叫 image zoom on hover 或 zoom-pan。
指针停在图片上时,图片在框内缓慢平滑地放大,框的尺寸保持不变;指针移开后平滑复原。
把图片裁剪在框内,不要溢出布局;键盘焦点时也显示同样的放大效果。Hover 中的其他动效
A
将鼠标悬停在上面
Float (上浮)
别称 Lift, Raise
悬停时,元素向上浮起几个像素,仿佛漂浮起来。
适用场景
卡片、按钮
在[应用位置]添加“上浮”(Float)悬停效果,也叫抬升(lift)或升起(raise)。
指针停在元素上时,元素轻轻向上浮起并保持,指针移开后再落回:平滑柔和,没有回弹。
只做视觉上的移动,不要挤动周围的布局,键盘焦点时也显示同样的效果。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)。
指针停在元素上时,元素周围淡入一圈柔和的彩色光晕,移开后淡出:柔和,不带位移。
光晕不要影响布局,键盘焦点时也显示同样的效果。