提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“发光”(Glow)悬停效果,也叫霓虹光晕(neon glow)。
指针停在元素上时,元素周围淡入一圈柔和的彩色光晕,移开后淡出:柔和,不带位移。
光晕不要影响布局,键盘焦点时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
Hover Shadow (悬停阴影)
别称 Drop Shadow on hover, Elevation on hover
悬停时元素下方出现或加深一层柔和阴影,营造抬升感。
适用场景
卡片、按钮
在[应用位置]添加“悬停阴影”(Hover Shadow)效果,也叫 drop shadow on hover 或 elevation on hover。
指针悬停时,元素下方的柔和阴影加深并扩散,让它看起来被抬起;指针离开后再淡回原样,元素本身保持不动。
阴影要足够含蓄,在浅色和深色主题下都合适;键盘聚焦时也显示同样的效果。ABCDEF
Neon Glow Text (霓虹发光文字)
别称 Neon Sign Flicker, Glowing Text
文字像霓虹灯管一样发光,并闪烁或脉动。
适用场景
夜生活、游戏主题
在[应用位置]添加“霓虹发光文字”(Neon Glow Text)效果,也叫霓虹招牌闪烁(neon sign flicker)或发光文字(glowing text)。
文字像霓虹灯管一样发出柔和、稳定的光,偶尔像真实招牌那样短暂熄灭一下。
闪烁要偶尔出现而不是快速连闪,因为快速闪光可能伤害部分用户;如果用户开启了“减少动态效果”(prefers-reduced-motion),就保持稳定发光。A
将鼠标悬停在上面
悬停时轮廓线从元素向外扩展,或向元素收缩。
适用场景
按钮
在[应用位置]添加“轮廓扩展”(Outline Expand)悬停效果。
轮廓线起初紧贴元素边缘,随后向外扩展,在四周留出一小圈间隙,悬停期间保持不变,指针离开后再收回:顺滑而迅速。
绘制轮廓时不要改变元素尺寸,也不要挤动周围内容;键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
渐变边框沿元素四周流动,指针悬停时向外扩展。
适用场景
按钮、卡片
在[应用位置]添加“悬停渐变边框”(Hover Border Gradient)效果。
一段短渐变高光静止在边框的某一处;指针悬停时,它沿边框匀速环绕,同时整条边框带着柔和光晕变亮。
只在悬停时让边框动起来;如果用户开启了“减少动态效果”(prefers-reduced-motion),则保持静止。Hover 中的其他动效
A
将鼠标悬停在上面
Grow (放大)
别称 Scale Up, Zoom In on hover
指针停在元素上时,元素平滑地略微放大。
适用场景
按钮、链接、缩略图
在[应用位置]添加“放大”(Grow)悬停效果,也叫放大缩放(scale up)。
指针停在元素上时,元素平滑地略微放大,移开后恢复原来大小:快速而含蓄。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Hollow (镂空)
别称 Ghost fill
悬停时填充背景消失,只留下描边按钮。
适用场景
按钮
在[应用位置]添加“镂空”(Hollow)悬停效果,也叫 ghost fill。
填充背景淡出,只留下描边,文字颜色随之切换,在空背景上依然清晰可读:顺滑而迅速。
两种状态下边框粗细保持一致,避免元素尺寸变化;键盘聚焦时也显示同样的效果。