提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“卡片悬停高亮”(Card Hover Effect)效果，也叫滑动高亮卡片网格(sliding highlight card grid)。
柔和的高亮背景出现在悬停卡片的后方，指针移到哪张卡片就平滑地滑到哪里，指针离开网格时淡出。
键盘焦点也要以同样方式移动高亮，卡片本身保持不动。相似的动效
ABC
点击试试
Tab Indicator Slide (标签指示条滑动)
别称 Sliding underline, Active tab indicator, Segmented control pill
下划线或胶囊形背景从旧标签滑动到新选中的标签。
适用场景
标签栏、分段控件
在[应用位置]添加“标签指示条滑动”(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
选中新标签时，下划线从旧标签滑到新标签，快速并平滑减速；如果两个标签宽度不同，就顺势伸缩到新标签的宽度。
保持正确的标签页语义并支持方向键切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，指示条直接移过去，不做滑动。ACB
点击试试
Shared Layout Animation (共享布局动画)
别称 layoutId, Shared element (in-page)
元素仿佛移动并缩放到新位置上对应的元素，看起来是同一个对象。
适用场景
选中高亮、缩略图到展开视图
在[应用位置]添加“共享布局动画”(Shared Layout Animation)，也叫页面内共享元素(in-page shared element)。
选中项变化时，元素要从旧位置平滑地移动并缩放到新位置，轻柔地落定，让人看出这是同一个对象而不是两个。
任何时刻只显示一份，移动过程中不要让周围布局跳动。ABC
移动指针试试
Focus Cards (聚焦卡片)
别称 Blur siblings on hover, Hover focus blur, Card hover effect
悬停的卡片保持清晰，其余卡片变得模糊、变暗。
适用场景
卡片网格、画廊
在[应用位置]添加“聚焦卡片”(Focus Cards)效果，也叫悬停时模糊其他卡片(blur siblings on hover)、悬停聚焦模糊(hover focus blur)或卡片悬停效果(card hover effect)。
指针停在某张卡片上时，其他卡片变模糊、变暗并略微缩小，悬停的卡片保持清晰；整个过程平滑过渡，指针移开后恢复原样。
键盘焦点时也采用同样的聚焦效果；没有悬停任何卡片时，所有卡片都保持清晰可读。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)。
柔和、淡淡的径向光晕跟随指针在卡片表面移动，指针移入时淡入，移出时淡出。
光晕放在卡片内容的后面，保证文字清晰可读；在触屏设备上则不显示光晕。Hover 中的其他动效
A
将鼠标悬停在上面
Curl (卷角)
别称 Page curl
悬停时，元素的一角像翻页一样卷起。
适用场景
卡片、便签
在[应用位置]添加“卷角”(Curl)悬停效果，也叫翻页卷角(page curl)。
元素的一角像翻页一样平滑地卷起，露出折角的背面，指针移开后再恢复平整。
折角要小，不要遮住重要内容，键盘焦点时也显示同样的效果。A
B
移动指针试试
Direction Aware Hover (方向感知悬停)
别称 Direction-aware overlay
遮罩层从指针进入的一侧滑入，并朝指针离开的一侧滑出。
适用场景
图片画廊、作品集网格
在[应用位置]添加“方向感知悬停”(Direction Aware Hover)效果，也叫方向感知遮罩(direction-aware overlay)。
遮罩层从指针进入的那一侧滑入，再朝指针离开的那一侧滑出：快速、顺滑。
根据指针进入和离开时的位置判断方向；触摸或键盘焦点时则统一使用一个默认方向。