提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“镂空”(Hollow)悬停效果，也叫 ghost fill。
填充背景淡出，只留下描边，文字颜色随之切换，在空背景上依然清晰可读：顺滑而迅速。
两种状态下边框粗细保持一致，避免元素尺寸变化；键盘聚焦时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
Background Fade (背景色淡变)
别称 Color Fade
悬停时，背景色和文字颜色交叉淡变为新的颜色。
适用场景
按钮、导航项
在[应用位置]添加“背景色淡变”(Background Fade)悬停效果，也叫颜色淡变(color fade)。
指针停在元素上时，背景色和文字颜色平滑地交叉淡变为新颜色，移开后再淡变回来：沉稳，不带任何位移。
两种状态下都要保证文字和背景有足够的对比度，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
悬停时，元素边缘内侧出现一条内描边线。
适用场景
按钮、卡片
在[应用位置]添加“内描边”(Trim)悬停效果。
指针停在元素上时，一条细线在元素边缘内侧淡入，移开后淡出：含蓄，不带位移。
线条要放在元素内部，保持元素尺寸不变，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
悬停时，边框颜色淡入或渐变为新颜色。
适用场景
按钮、输入框
在[应用位置]添加“边框淡变”(Border Fade)悬停效果。
指针停在元素上时，边框从柔和的颜色平滑淡变为强调色：含蓄，不带位移或尺寸变化。
两种状态下的边框宽度保持一致，避免任何错位，键盘焦点时也显示同样的效果。Hover 中的其他动效
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。
指针悬停时，元素下方的柔和阴影加深并扩散，让它看起来被抬起；指针离开后再淡回原样，元素本身保持不动。
阴影要足够含蓄，在浅色和深色主题下都合适；键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
Hover State Layer (悬停状态层)
别称 Hover State, State layer, Hover overlay
一层半透明叠加层为元素染上颜色，表示指针正悬停其上。
适用场景
设计系统组件
在[应用位置]添加“悬停状态层”(Hover State Layer)，也叫 hover state、state layer 或 hover overlay。
指针悬停时，一层使用内容颜色的淡淡半透明叠加层迅速淡入覆盖元素，指针离开后淡出。
保持足够淡，不影响对比度；聚焦和按下状态也使用同样的状态层做法。