Hover

彩色背景从一侧扫入，带有弹性的轻微过冲。

在[应用位置]添加“背景弹性扫入”(Background Bounce Sweep)悬停效果。
新的背景色从一侧扫入，带着弹性稍微越过另一侧边缘后再回落稳定，同时文字颜色随之切换以保持可读；指针移开时平滑地滑出。
让文字始终位于填充层之上，键盘焦点时也显示同样的效果。

悬停时，背景色和文字颜色交叉淡变为新的颜色。

在[应用位置]添加“背景色淡变”(Background Fade)悬停效果，也叫颜色淡变(color fade)。
指针停在元素上时，背景色和文字颜色平滑地交叉淡变为新颜色，移开后再淡变回来：沉稳，不带任何位移。
两种状态下都要保证文字和背景有足够的对比度，键盘焦点时也显示同样的效果。

悬停时，彩色背景从一侧边缘扫过整个元素。

在[应用位置]添加“背景扫入”(Background Sweep)悬停效果，也叫背景填充(background fill)或滑动填充(slide fill)。
新的背景色从左侧边缘扫到右侧，平滑、快速、没有回弹，指针移开时以同样方式退回，同时文字颜色随之切换以保持可读。
让填充始终裁切在元素的形状之内，键盘焦点时也显示同样的效果。

悬停期间，元素先向上浮起，然后持续上下轻轻浮动。

在[应用位置]添加“上下浮动”(Bob)悬停效果，也叫悬挂(hang)。
元素先轻轻浮起，指针停留期间持续柔和地上下浮动，指针移开后再落回原位：缓慢而柔和。
只在悬停期间循环浮动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。

悬停时，边框颜色淡入或渐变为新颜色。

在[应用位置]添加“边框淡变”(Border Fade)悬停效果。
指针停在元素上时，边框从柔和的颜色平滑淡变为强调色：含蓄，不带位移或尺寸变化。
两种状态下的边框宽度保持一致，避免任何错位，键盘焦点时也显示同样的效果。

悬停时，同心的边框圆环从元素向外扩散或向内收缩。

在[应用位置]添加“边框波纹”(Border Ripple)悬停效果。
指针移入时，几道边框圆环依次从元素向外扩散并淡出：快速轻盈，像水波一样。
每次悬停只播放一次，不要循环，也不要让圆环挤动周围的布局。

悬停开始或结束时，元素带着弹性过冲进行缩放。

在[应用位置]添加“弹性缩放”(Bounce Scale)悬停效果，也叫弹入/弹出(bounce in / out)。
元素带着明显的弹性稍微放大，短暂超过最终尺寸后再回稳；指针移开时以同样的弹性缩回。
不要让周围的布局发生位移，键盘焦点时也显示同样的效果。

高亮背景在网格中的卡片之间滑动，跟随当前悬停的卡片。

在[应用位置]添加“卡片悬停高亮”(Card Hover Effect)效果，也叫滑动高亮卡片网格(sliding highlight card grid)。
柔和的高亮背景出现在悬停卡片的后方，指针移到哪张卡片就平滑地滑到哪里，指针离开网格时淡出。
键盘焦点也要以同样方式移动高亮，卡片本身保持不动。

柔和的径向光跟随指针在卡片表面移动，照亮下方的背景。

在[应用位置]添加“卡片聚光灯”(Card Spotlight)效果，也叫聚光悬停(spotlight hover)、指针光晕(pointer glow)、跟随鼠标的光晕(mouse-following glow)或径向渐变悬停(radial gradient hover)。
柔和、淡淡的径向光晕跟随指针在卡片表面移动，指针移入时淡入，移出时淡出。
光晕放在卡片内容的后面，保证文字清晰可读；在触屏设备上则不显示光晕。

悬停时，元素的一角像翻页一样卷起。

在[应用位置]添加“卷角”(Curl)悬停效果，也叫翻页卷角(page curl)。
元素的一角像翻页一样平滑地卷起，露出折角的背面，指针移开后再恢复平整。
折角要小，不要遮住重要内容，键盘焦点时也显示同样的效果。

遮罩层从指针进入的一侧滑入，并朝指针离开的一侧滑出。

在[应用位置]添加“方向感知悬停”(Direction Aware Hover)效果，也叫方向感知遮罩(direction-aware overlay)。
遮罩层从指针进入的那一侧滑入，再朝指针离开的那一侧滑出：快速、顺滑。
根据指针进入和离开时的位置判断方向；触摸或键盘焦点时则统一使用一个默认方向。

指针靠近时，一排图标平滑放大，就像 macOS 的程序坞。

在[应用位置]添加“程序坞放大”(Dock Magnification)效果，也叫程序坞(dock)。
指针越靠近，这一排图标就平滑地放大，最近的图标最大、相邻的图标稍微放大；指针移开后全部恢复原来大小。
图标从固定的基线向上放大；在触摸和键盘操作时，每个图标都要以正常大小正常可用。

悬停时，元素向上浮起几个像素，仿佛漂浮起来。

在[应用位置]添加“上浮”(Float)悬停效果，也叫抬升(lift)或升起(raise)。
指针停在元素上时，元素轻轻向上浮起并保持，指针移开后再落回：平滑柔和，没有回弹。
只做视觉上的移动，不要挤动周围的布局，键盘焦点时也显示同样的效果。

悬停的卡片保持清晰，其余卡片变得模糊、变暗。

在[应用位置]添加“聚焦卡片”(Focus Cards)效果，也叫悬停时模糊其他卡片(blur siblings on hover)、悬停聚焦模糊(hover focus blur)或卡片悬停效果(card hover effect)。
指针停在某张卡片上时，其他卡片变模糊、变暗并略微缩小，悬停的卡片保持清晰；整个过程平滑过渡，指针移开后恢复原样。
键盘焦点时也采用同样的聚焦效果；没有悬停任何卡片时，所有卡片都保持清晰可读。

悬停时，元素周围出现一圈彩色光晕。

在[应用位置]添加“发光”(Glow)悬停效果，也叫霓虹光晕(neon glow)。
指针停在元素上时，元素周围淡入一圈柔和的彩色光晕，移开后淡出：柔和，不带位移。
光晕不要影响布局，键盘焦点时也显示同样的效果。

指针停在元素上时，元素平滑地略微放大。

在[应用位置]添加“放大”(Grow)悬停效果，也叫放大缩放(scale up)。
指针停在元素上时，元素平滑地略微放大，移开后恢复原来大小：快速而含蓄。
不要让周围的布局发生位移，键盘焦点时也显示同样的效果。

悬停时填充背景消失，只留下描边按钮。

在[应用位置]添加“镂空”(Hollow)悬停效果，也叫 ghost fill。
填充背景淡出，只留下描边，文字颜色随之切换，在空背景上依然清晰可读：顺滑而迅速。
两种状态下边框粗细保持一致，避免元素尺寸变化；键盘聚焦时也显示同样的效果。

渐变边框沿元素四周流动，指针悬停时向外扩展。

在[应用位置]添加“悬停渐变边框”(Hover Border Gradient)效果。
一段短渐变高光静止在边框的某一处；指针悬停时，它沿边框匀速环绕，同时整条边框带着柔和光晕变亮。
只在悬停时让边框动起来；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。

悬停时元素下方出现或加深一层柔和阴影，营造抬升感。

在[应用位置]添加“悬停阴影”(Hover Shadow)效果，也叫 drop shadow on hover 或 elevation on hover。
指针悬停时，元素下方的柔和阴影加深并扩散，让它看起来被抬起；指针离开后再淡回原样，元素本身保持不动。
阴影要足够含蓄，在浅色和深色主题下都合适；键盘聚焦时也显示同样的效果。

一层半透明叠加层为元素染上颜色，表示指针正悬停其上。

在[应用位置]添加“悬停状态层”(Hover State Layer)，也叫 hover state、state layer 或 hover overlay。
指针悬停时，一层使用内容颜色的淡淡半透明叠加层迅速淡入覆盖元素，指针离开后淡出。
保持足够淡，不影响对比度；聚焦和按下状态也使用同样的状态层做法。

悬停时图标向下掉出视野，再从上方落回。

在[应用位置]添加“图标下落”(Icon Drop)悬停效果。
元素内的图标向下掉出视野，再从上方落回原位：迅速，落地轻柔。
每次指针进入只播放一次，不要循环；标签和按钮尺寸保持不变。

图标飘出按钮并淡出，同时新图标飘入。

在[应用位置]添加“图标飘走”(Icon Float Away)悬停效果。
当前图标向上飘走并淡出，同时新图标从下方飘上来补位，过渡顺滑；指针离开时反向切换回来。
切换过程中按钮尺寸保持固定；键盘聚焦时也显示同样的效果。

悬停按钮时，按钮内的图标转动一圈。

在[应用位置]添加“图标旋转”(Icon Spin)悬停效果。
指针进入时，元素内的图标顺滑地转一整圈；指针离开时再转回去。
只旋转图标，不旋转整个按钮；键盘聚焦时也显示同样的效果。

悬停时按钮文字滑出，箭头和填充色随之展开。

在[应用位置]添加“交互悬停按钮”(Interactive Hover Button)效果。
文字旁的小圆点扩大直到填满按钮，同时文字向一侧滑出并淡出，带箭头的文字再从新填充色上方滑入：顺滑而迅速。
按钮尺寸保持固定，文字全程清晰可读；键盘聚焦时也显示同样的效果。

悬停时箭头或元素本身向前或向后滑动几个像素。

在[应用位置]添加“前后轻推”(Nudge Forward / Backward)悬停效果，也叫 arrow nudge。
指针悬停时，箭头朝它所指的方向轻轻滑动一小段，指针离开后滑回：快速、幅度小。
只移动箭头，不要让文字或布局跟着偏移；键盘聚焦时也显示同样的效果。

悬停时轮廓线从元素向外扩展，或向元素收缩。

在[应用位置]添加“轮廓扩展”(Outline Expand)悬停效果。
轮廓线起初紧贴元素边缘，随后向外扩展，在四周留出一小圈间隙，悬停期间保持不变，指针离开后再收回：顺滑而迅速。
绘制轮廓时不要改变元素尺寸，也不要挤动周围内容；键盘聚焦时也显示同样的效果。

悬停时文字上方出现一条线，从左侧、中间或右侧延伸开来。

在[应用位置]添加“上划线生长”(Overline Grow)悬停效果。
指针悬停时，文字上方的线从中间向两侧延伸，指针离开后再缩回中间：快速而顺滑。
预留出线条的空间，避免文字移位；键盘聚焦时也显示同样的效果。

元素快速放大，再带着弹性“啵”地回到原样。

在[应用位置]添加“弹出”(Pop)悬停效果。
每次指针进入时，元素快速鼓起一次再回到正常大小，像一次带弹性的轻快弹跳。
每次悬停只播放一次，不要停留在放大状态，也不要循环；避免周围布局移位。

元素向内一沉再弹回，仿佛按下了一个实体按钮。

在[应用位置]添加“按压”(Push)悬停效果。
每次指针进入时，元素快速缩小一次再弹回正常大小，就像按下一个实体按钮。
每次悬停只播放一次，不要循环；避免周围布局移位。

悬停时一个彩色圆形从中心扩大或向中心收缩，填满元素。

在[应用位置]添加“径向填充”(Radial Fill)悬停效果，也叫 circle expand。
新颜色的圆形从中心顺滑地扩大直到填满元素，指针离开后再缩回中心，同时文字颜色随之切换，保持清晰可读。
圆形要裁切在元素形状之内，文字位于其上方；键盘聚焦时也显示同样的效果。

悬停时元素内部的矩形扩大或收缩，从而切换背景。

在[应用位置]添加“矩形填充”(Rectangle Fill)悬停效果。
随着内部矩形向中心收缩，新背景色从四条边向内合拢；指针离开后再重新打开，同时文字颜色随之切换，保持清晰可读：顺滑而迅速。
文字始终位于填充层上方；键盘聚焦时也显示同样的效果。

悬停时元素旋转几度。

在[应用位置]添加“旋转”(Rotate)悬停效果。
指针悬停时，元素顺时针轻微转动，指针离开后转回：顺滑而含蓄。
避免周围布局移位；键盘聚焦时也显示同样的效果。

悬停时，元素的直角平滑地变成圆角。

在[应用位置]添加“圆角化”(Round Corners)悬停效果。
指针停在元素上时，元素的直角平滑地变圆，移开后再恢复成直角：柔和而迅速。
保持元素尺寸不变，键盘焦点时也显示同样的效果。

悬停时，一道斜向光带从元素的一侧扫到另一侧。

在[应用位置]添加“扫光”(Shine Sweep)悬停效果，也叫光泽(sheen)、闪光按钮(shiny button)、悬停扫光(shine on hover)、闪光(glint)、微光(shimmer)或微光按钮(shimmer button)。
指针停在元素上时，一道柔和的斜向光带从左向右扫过元素，并在短暂停顿后重复。
光带要裁剪在元素内部，指针移开后停止；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则不要播放。

指针停在元素上时，元素平滑地略微缩小。

在[应用位置]添加“缩小”(Shrink)悬停效果，也叫缩小(scale down)。
指针停在元素上时，元素平滑地略微缩小，移开后恢复原来大小：快速而含蓄。
不要让周围的布局发生位移，键盘焦点时也显示同样的效果。

悬停时，背景像百叶窗一样从中间或两边展开或合拢。

在[应用位置]添加“百叶窗填充”(Shutter Fill)悬停效果，也叫百叶窗(shutter)。
新的背景色从中间一条竖线像百叶窗一样向两侧展开，指针移开后再向中间合拢，同时文字颜色随之切换以保持清晰可读：流畅而迅速。
填充要裁剪在元素内部，文字保持在其上方，键盘焦点时也显示同样的效果。

悬停时，元素向下移动几个像素，仿佛被按进页面里。

在[应用位置]添加“下沉”(Sink)悬停效果。
指针停在元素上时，元素略微下移并保持住，仿佛被按进页面里，移开后再升回原位：平滑，没有回弹。
只在视觉上移动，不要让周围的布局发生位移，键盘焦点时也显示同样的效果。

悬停时，元素向一侧斜切变形。

在[应用位置]添加“斜切”(Skew)悬停效果。
指针停在元素上时，元素向一侧斜切成轻微倾斜的样子，移开后恢复端正：快速而流畅。
倾斜时文字仍要清晰可读，不要让周围的布局发生位移，键盘焦点时也显示同样的效果。

悬停时，元素一侧出现一个对话气泡的小三角。

在[应用位置]添加“对话气泡”(Speech Bubble)悬停效果，也叫气泡(bubble)。
一个小三角尾巴从元素一侧的后面滑出，让元素变成对话气泡的形状，指针移开后再滑回去：快速而流畅。
尾巴要和元素同色，看起来是一个整体，键盘焦点时也显示同样的效果。

悬停时，元素边缘内侧出现一条内描边线。

在[应用位置]添加“内描边”(Trim)悬停效果。
指针停在元素上时，一条细线在元素边缘内侧淡入，移开后淡出：含蓄，不带位移。
线条要放在元素内部，保持元素尺寸不变，键盘焦点时也显示同样的效果。

一条线从底边或顶边滑入到位，为元素加上下划线或上划线。

在[应用位置]添加“下划线显现”(Underline Reveal)悬停效果，也叫上划线显现(overline reveal)或显现(reveal)。
指针停在元素上时，一条通宽的线从底边正下方向上滑入到位，移开后再向下滑出视野：快速而流畅。
在边缘处裁剪线条，让它以滑入而不是淡入或伸长的方式出现，键盘焦点时也显示同样的效果。

指针在卡片上移动时，卡片随之轻微平移和缩放。

在[应用位置]添加“晃动卡片”(Wobble Card)效果。
指针在卡片上移动时，卡片朝指针方向轻微平移，内容则朝反方向轻微平移并略微放大，平滑地跟随；指针移开后一切回到原位。
保持幅度很小；在触屏设备上关闭，如果用户开启了“减少动态效果”(prefers-reduced-motion)，也要关闭。