提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“放大”(Grow)悬停效果,也叫放大缩放(scale up)。
指针停在元素上时,元素平滑地略微放大,移开后恢复原来大小:快速而含蓄。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
元素快速放大,再带着弹性“啵”地回到原样。
适用场景
图标、按钮
在[应用位置]添加“弹出”(Pop)悬停效果。
每次指针进入时,元素快速鼓起一次再回到正常大小,像一次带弹性的轻快弹跳。
每次悬停只播放一次,不要停留在放大状态,也不要循环;避免周围布局移位。A
将鼠标悬停在上面
Bounce Scale (弹性缩放)
别称 Bounce In / Out
悬停开始或结束时,元素带着弹性过冲进行缩放。
适用场景
按钮、徽章
在[应用位置]添加“弹性缩放”(Bounce Scale)悬停效果,也叫弹入/弹出(bounce in / out)。
元素带着明显的弹性稍微放大,短暂超过最终尺寸后再回稳;指针移开时以同样的弹性缩回。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。将鼠标悬停在上面
Hover Zoom (图片悬停放大)
别称 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
悬停时图片在框内放大,有时还会随指针平移。
适用场景
产品卡片、缩略图
在[应用位置]添加“图片悬停放大”(Hover Zoom)效果,也叫 image zoom on hover 或 zoom-pan。
指针停在图片上时,图片在框内缓慢平滑地放大,框的尺寸保持不变;指针移开后平滑复原。
把图片裁剪在框内,不要溢出布局;键盘焦点时也显示同样的放大效果。ABCDE
移动指针试试
Dock Magnification (程序坞放大)
别称 Dock
指针靠近时,一排图标平滑放大,就像 macOS 的程序坞。
适用场景
图标工具栏、导航
在[应用位置]添加“程序坞放大”(Dock Magnification)效果,也叫程序坞(dock)。
指针越靠近,这一排图标就平滑地放大,最近的图标最大、相邻的图标稍微放大;指针移开后全部恢复原来大小。
图标从固定的基线向上放大;在触摸和键盘操作时,每个图标都要以正常大小正常可用。Hover 中的其他动效
A
将鼠标悬停在上面
Hollow (镂空)
别称 Ghost fill
悬停时填充背景消失,只留下描边按钮。
适用场景
按钮
在[应用位置]添加“镂空”(Hollow)悬停效果,也叫 ghost fill。
填充背景淡出,只留下描边,文字颜色随之切换,在空背景上依然清晰可读:顺滑而迅速。
两种状态下边框粗细保持一致,避免元素尺寸变化;键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
渐变边框沿元素四周流动,指针悬停时向外扩展。
适用场景
按钮、卡片
在[应用位置]添加“悬停渐变边框”(Hover Border Gradient)效果。
一段短渐变高光静止在边框的某一处;指针悬停时,它沿边框匀速环绕,同时整条边框带着柔和光晕变亮。
只在悬停时让边框动起来;如果用户开启了“减少动态效果”(prefers-reduced-motion),则保持静止。A
将鼠标悬停在上面
Hover Shadow (悬停阴影)
别称 Drop Shadow on hover, Elevation on hover
悬停时元素下方出现或加深一层柔和阴影,营造抬升感。
适用场景
卡片、按钮
在[应用位置]添加“悬停阴影”(Hover Shadow)效果,也叫 drop shadow on hover 或 elevation on hover。
指针悬停时,元素下方的柔和阴影加深并扩散,让它看起来被抬起;指针离开后再淡回原样,元素本身保持不动。
阴影要足够含蓄,在浅色和深色主题下都合适;键盘聚焦时也显示同样的效果。