提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“边框波纹”(Border Ripple)悬停效果。
指针移入时,几道边框圆环依次从元素向外扩散并淡出:快速轻盈,像水波一样。
每次悬停只播放一次,不要循环,也不要让圆环挤动周围的布局。相似的动效
A
将鼠标悬停在上面
悬停时轮廓线从元素向外扩展,或向元素收缩。
适用场景
按钮
在[应用位置]添加“轮廓扩展”(Outline Expand)悬停效果。
轮廓线起初紧贴元素边缘,随后向外扩展,在四周留出一小圈间隙,悬停期间保持不变,指针离开后再收回:顺滑而迅速。
绘制轮廓时不要改变元素尺寸,也不要挤动周围内容;键盘聚焦时也显示同样的效果。A
Ping (雷达扩散)
别称 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
元素的副本反复放大并淡出,就像雷达波纹。
适用场景
通知小圆点、实时状态
在[应用位置]添加“雷达扩散”(Ping)效果,也叫雷达波(radar ping)或脉冲环(pulse ring)。
元素的一个副本要向外扩大并淡出,以稳定的节奏一遍遍重复,而元素本身保持不动。
把圆环画在单独的图层上,确保它永远不影响布局;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止循环。A
Ripple Rings (同心波纹)
别称 Background ripple, Concentric ripples
同心圆从中心点向外扩散并逐渐淡出。
适用场景
首屏中心元素、音频或配对视觉
在[应用位置]添加“同心波纹”(Ripple Rings)效果,也叫 background ripple 或 concentric ripples。
圆环从中心点不断向外扩散,越大越淡,一个接一个、间距均匀:缓慢而稳定。
中心元素保持静止、位置不变;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止波纹。Hover 中的其他动效
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)。
柔和的高亮背景出现在悬停卡片的后方,指针移到哪张卡片就平滑地滑到哪里,指针离开网格时淡出。
键盘焦点也要以同样方式移动高亮,卡片本身保持不动。A
移动指针试试
Card Spotlight (卡片聚光灯)
别称 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
柔和的径向光跟随指针在卡片表面移动,照亮下方的背景。
适用场景
功能卡片、便当网格
在[应用位置]添加“卡片聚光灯”(Card Spotlight)效果,也叫聚光悬停(spotlight hover)、指针光晕(pointer glow)、跟随鼠标的光晕(mouse-following glow)或径向渐变悬停(radial gradient hover)。
柔和、淡淡的径向光晕跟随指针在卡片表面移动,指针移入时淡入,移出时淡出。
光晕放在卡片内容的后面,保证文字清晰可读;在触屏设备上则不显示光晕。