提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“边框淡变”(Border Fade)悬停效果。
指针停在元素上时,边框从柔和的颜色平滑淡变为强调色:含蓄,不带位移或尺寸变化。
两种状态下的边框宽度保持一致,避免任何错位,键盘焦点时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
Background Fade (背景色淡变)
别称 Color Fade
悬停时,背景色和文字颜色交叉淡变为新的颜色。
适用场景
按钮、导航项
在[应用位置]添加“背景色淡变”(Background Fade)悬停效果,也叫颜色淡变(color fade)。
指针停在元素上时,背景色和文字颜色平滑地交叉淡变为新颜色,移开后再淡变回来:沉稳,不带任何位移。
两种状态下都要保证文字和背景有足够的对比度,键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
悬停时,元素边缘内侧出现一条内描边线。
适用场景
按钮、卡片
在[应用位置]添加“内描边”(Trim)悬停效果。
指针停在元素上时,一条细线在元素边缘内侧淡入,移开后淡出:含蓄,不带位移。
线条要放在元素内部,保持元素尺寸不变,键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
悬停时轮廓线从元素向外扩展,或向元素收缩。
适用场景
按钮
在[应用位置]添加“轮廓扩展”(Outline Expand)悬停效果。
轮廓线起初紧贴元素边缘,随后向外扩展,在四周留出一小圈间隙,悬停期间保持不变,指针离开后再收回:顺滑而迅速。
绘制轮廓时不要改变元素尺寸,也不要挤动周围内容;键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
Hollow (镂空)
别称 Ghost fill
悬停时填充背景消失,只留下描边按钮。
适用场景
按钮
在[应用位置]添加“镂空”(Hollow)悬停效果,也叫 ghost fill。
填充背景淡出,只留下描边,文字颜色随之切换,在空背景上依然清晰可读:顺滑而迅速。
两种状态下边框粗细保持一致,避免元素尺寸变化;键盘聚焦时也显示同样的效果。Hover 中的其他动效
A
将鼠标悬停在上面
悬停时,同心的边框圆环从元素向外扩散或向内收缩。
适用场景
按钮
在[应用位置]添加“边框波纹”(Border Ripple)悬停效果。
指针移入时,几道边框圆环依次从元素向外扩散并淡出:快速轻盈,像水波一样。
每次悬停只播放一次,不要循环,也不要让圆环挤动周围的布局。A
将鼠标悬停在上面
Bounce Scale (弹性缩放)
别称 Bounce In / Out
悬停开始或结束时,元素带着弹性过冲进行缩放。
适用场景
按钮、徽章
在[应用位置]添加“弹性缩放”(Bounce Scale)悬停效果,也叫弹入/弹出(bounce in / out)。
元素带着明显的弹性稍微放大,短暂超过最终尺寸后再回稳;指针移开时以同样的弹性缩回。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。ABCDEF
移动指针试试
Card Hover Effect (卡片悬停高亮)
别称 Sliding highlight card grid
高亮背景在网格中的卡片之间滑动,跟随当前悬停的卡片。
适用场景
卡片网格、功能列表
在[应用位置]添加“卡片悬停高亮”(Card Hover Effect)效果,也叫滑动高亮卡片网格(sliding highlight card grid)。
柔和的高亮背景出现在悬停卡片的后方,指针移到哪张卡片就平滑地滑到哪里,指针离开网格时淡出。
键盘焦点也要以同样方式移动高亮,卡片本身保持不动。