提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“下划线显现”(Underline Reveal)悬停效果，也叫上划线显现(overline reveal)或显现(reveal)。
指针停在元素上时，一条通宽的线从底边正下方向上滑入到位，移开后再向下滑出视野：快速而流畅。
在边缘处裁剪线条，让它以滑入而不是淡入或伸长的方式出现，键盘焦点时也显示同样的效果。相似的动效
ABC DEF
将鼠标悬停在上面
Underline Draw (下划线绘制)
别称 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
悬停时，链接下方的下划线从一侧或中间延伸出来。
适用场景
导航链接、文内链接
在[应用位置]添加“下划线绘制”(Underline Draw)悬停效果，也叫动画下划线(animated underline)或悬停下划线动画(hover underline animation)。
指针停在链接上时，文字下方的下划线从左到右平滑延伸，指针移开后再收回：快速而含蓄。
不要让下划线挤动周围布局，并且在键盘聚焦时呈现同样的效果。ABC
将鼠标悬停在上面
悬停时文字上方出现一条线，从左侧、中间或右侧延伸开来。
适用场景
导航链接、标签页
在[应用位置]添加“上划线生长”(Overline Grow)悬停效果。
指针悬停时，文字上方的线从中间向两侧延伸，指针离开后再缩回中间：快速而顺滑。
预留出线条的空间，避免文字移位；键盘聚焦时也显示同样的效果。ABC DEFG HIJ KL
Text Highlighter (荧光笔高亮)
别称 Highlight Marker, Marker Underline, Hero Highlight
一条荧光笔般的色带划过短语，将其突出强调。
适用场景
强调关键语句
在[应用位置]添加“荧光笔高亮”(Text Highlighter)效果，也叫高亮标记(highlight marker)或马克笔下划线(marker underline)。
一条荧光笔般的色带从左到右平滑地划过关键语句的背后，就像有人用笔把它标出来。
在语句滚动进入视口时只播放一次，保证色带上的文字清晰可读，并且在语句换成两行时让色带正确跟随。ABC
点击试试
Tab Indicator Slide (标签指示条滑动)
别称 Sliding underline, Active tab indicator, Segmented control pill
下划线或胶囊形背景从旧标签滑动到新选中的标签。
适用场景
标签栏、分段控件
在[应用位置]添加“标签指示条滑动”(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
选中新标签时，下划线从旧标签滑到新标签，快速并平滑减速；如果两个标签宽度不同，就顺势伸缩到新标签的宽度。
保持正确的标签页语义并支持方向键切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，指示条直接移过去，不做滑动。Hover 中的其他动效
A
移动指针试试
指针在卡片上移动时，卡片随之轻微平移和缩放。
适用场景
促销卡片
在[应用位置]添加“晃动卡片”(Wobble Card)效果。
指针在卡片上移动时，卡片朝指针方向轻微平移，内容则朝反方向轻微平移并略微放大，平滑地跟随；指针移开后一切回到原位。
保持幅度很小；在触屏设备上关闭，如果用户开启了“减少动态效果”(prefers-reduced-motion)，也要关闭。A
将鼠标悬停在上面
彩色背景从一侧扫入，带有弹性的轻微过冲。
适用场景
按钮
在[应用位置]添加“背景弹性扫入”(Background Bounce Sweep)悬停效果。
新的背景色从一侧扫入，带着弹性稍微越过另一侧边缘后再回落稳定，同时文字颜色随之切换以保持可读；指针移开时平滑地滑出。
让文字始终位于填充层之上，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Background Fade (背景色淡变)
别称 Color Fade
悬停时，背景色和文字颜色交叉淡变为新的颜色。
适用场景
按钮、导航项
在[应用位置]添加“背景色淡变”(Background Fade)悬停效果，也叫颜色淡变(color fade)。
指针停在元素上时，背景色和文字颜色平滑地交叉淡变为新颜色，移开后再淡变回来：沉稳，不带任何位移。
两种状态下都要保证文字和背景有足够的对比度，键盘焦点时也显示同样的效果。