提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“内描边”(Trim)悬停效果。
指针停在元素上时,一条细线在元素边缘内侧淡入,移开后淡出:含蓄,不带位移。
线条要放在元素内部,保持元素尺寸不变,键盘焦点时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
悬停时轮廓线从元素向外扩展,或向元素收缩。
适用场景
按钮
在[应用位置]添加“轮廓扩展”(Outline Expand)悬停效果。
轮廓线起初紧贴元素边缘,随后向外扩展,在四周留出一小圈间隙,悬停期间保持不变,指针离开后再收回:顺滑而迅速。
绘制轮廓时不要改变元素尺寸,也不要挤动周围内容;键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
悬停时,边框颜色淡入或渐变为新颜色。
适用场景
按钮、输入框
在[应用位置]添加“边框淡变”(Border Fade)悬停效果。
指针停在元素上时,边框从柔和的颜色平滑淡变为强调色:含蓄,不带位移或尺寸变化。
两种状态下的边框宽度保持一致,避免任何错位,键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Hollow (镂空)
别称 Ghost fill
悬停时填充背景消失,只留下描边按钮。
适用场景
按钮
在[应用位置]添加“镂空”(Hollow)悬停效果,也叫 ghost fill。
填充背景淡出,只留下描边,文字颜色随之切换,在空背景上依然清晰可读:顺滑而迅速。
两种状态下边框粗细保持一致,避免元素尺寸变化;键盘聚焦时也显示同样的效果。Hover 中的其他动效
ABC
将鼠标悬停在上面
Underline Reveal (下划线显现)
别称 Overline Reveal, Reveal
一条线从底边或顶边滑入到位,为元素加上下划线或上划线。
适用场景
导航链接、按钮
在[应用位置]添加“下划线显现”(Underline Reveal)悬停效果,也叫上划线显现(overline reveal)或显现(reveal)。
指针停在元素上时,一条通宽的线从底边正下方向上滑入到位,移开后再向下滑出视野:快速而流畅。
在边缘处裁剪线条,让它以滑入而不是淡入或伸长的方式出现,键盘焦点时也显示同样的效果。A
移动指针试试
指针在卡片上移动时,卡片随之轻微平移和缩放。
适用场景
促销卡片
在[应用位置]添加“晃动卡片”(Wobble Card)效果。
指针在卡片上移动时,卡片朝指针方向轻微平移,内容则朝反方向轻微平移并略微放大,平滑地跟随;指针移开后一切回到原位。
保持幅度很小;在触屏设备上关闭,如果用户开启了“减少动态效果”(prefers-reduced-motion),也要关闭。A
将鼠标悬停在上面
彩色背景从一侧扫入,带有弹性的轻微过冲。
适用场景
按钮
在[应用位置]添加“背景弹性扫入”(Background Bounce Sweep)悬停效果。
新的背景色从一侧扫入,带着弹性稍微越过另一侧边缘后再回落稳定,同时文字颜色随之切换以保持可读;指针移开时平滑地滑出。
让文字始终位于填充层之上,键盘焦点时也显示同样的效果。