网页动效，实时演示。提示词，一键复制。

元素从缩小并偏移的状态开始，滑入后放大到完整尺寸。

在[应用位置]添加“回弹进入”(Back In)入场动画，也叫 back in up 或 back in down。
元素以缩小且略微透明的状态从边缘外进入，到达位置后再放大到完整尺寸：一个刻意的两段式动作，而不是快速弹出。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素缩小并滑向一侧边缘，同时淡出。

在[应用位置]添加“回弹退出”(Back Out)退场动画。
元素先在原地稍微缩小，再滑向一侧边缘并淡出：一个刻意的两段式退场，而不是一次快速淡出。
等动画结束后再移除元素，避免布局在动画中途跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即移除。

元素从严重模糊的状态逐渐变清晰，常伴随滑入或淡入。

在[应用位置]添加“模糊进入”(Blur In)入场动画，也叫 text focus in、focus in 或 blur text reveal。
内容从严重模糊且透明的状态开始，在原地逐渐变清晰：柔和、偏慢，没有位移。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示清晰的文字。

元素在淡出或滑出的同时逐渐变模糊。

在[应用位置]添加“模糊退出”(Blur Out)退场动画，也叫 text blur out 或 smoky text dissipate。
内容在原地越来越模糊并逐渐淡出：柔和、偏慢，仿佛消散一般。
等模糊效果结束后再隐藏或移除元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素以超出后回落的弹跳方式进入，可以是放大出现，也可以从边缘落下。

在[应用位置]添加“弹跳进入”(Bounce In)入场动画，也叫 bounce in down 或 bounce in up。
元素从小逐渐放大，略微超过完整尺寸后晃动几下再稳定下来：迅速、有弹性。
只播放一次，以免持续抢夺注意力；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素轻轻弹一下，然后缩小消失或从边缘飞出。

在[应用位置]添加“弹跳退出”(Bounce Out)退场动画。
元素先轻轻下沉，再略微胀大超过原尺寸，然后一边缩小一边淡出：短促、有弹性。
等动画结束后再将它从布局中移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

clip-path 或遮罩从边缘或某一点展开，逐步露出图片或文字。

在[应用位置]添加“裁剪显现”(Clip Reveal)入场效果，也叫 mask reveal、wipe reveal 或 image reveal。
让裁剪边缘从左向右扫过，内容保持不动、逐步显露出来：流畅，开始和结束都要柔和。
从一开始就为元素预留空间，避免布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接完整显示。

元素在原位从完全透明变为完全不透明，离开时则反过来。

在[应用位置]添加“淡入淡出”(Fade In / Fade Out)动画，也叫 fade。
元素出现时在原位从完全透明变为完全可见，离开时以同样方式淡出：柔和，不要位移或缩放。
淡出后要确保它无法再被点击或通过键盘聚焦；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则瞬间切换。

元素从一侧移动一小段距离到最终位置，同时淡入。

在[应用位置]添加“方向淡入”(Fade In Directional)入场动画，也叫 fade in left、fade in right 或 fade in down。
元素从一侧移动一小段距离到最终位置，同时淡入：迅速流畅，到位时减速，不要弹跳。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素朝一个方向移开，同时淡出。

在[应用位置]添加“方向淡出”(Fade Out Directional)退场动画，也叫 fade out up 或 fade out down。
元素朝一个方向移动一小段距离并淡出：迅速，离开时逐渐加速。
等淡出结束后再将它从布局中移除，避免相邻内容提前跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素在淡入的同时向上移动一小段距离，仿佛落到自己的位置上。

在[应用位置]添加“上浮淡入”(Fade Up)入场动画，也叫 fade-in-up 或滚动显现(reveal on scroll)。
元素第一次滚动进入视口时，一边轻微上移一边淡入：要含蓄、迅速，不要有弹跳感。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。

元素像故障的霓虹灯一样快速闪烁几下，然后保持可见。

在[应用位置]添加“频闪进入”(Flicker In)入场动画。
元素像故障的霓虹灯一样，以不规则的间隔亮灭几次后保持点亮：干脆的闪烁，没有位移。
只播放一次，闪烁次数要少、速度不能太快，确保对光敏感的人也安全；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接以常亮状态显示。

元素绕 Y 轴旋转一整圈，同时稍微靠近观看者再退回。

在[应用位置]添加“翻转”(Flip)动画。
元素绕竖直轴旋转一整圈，同时稍微靠近观看者，然后尺寸微微一缩再回到原位：活泼但简短。
加上透视(perspective)让旋转有纵深感，只播放一次、不要循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则省略旋转。

元素绕水平轴或垂直轴做 3D 旋转，从侧面朝向转为正对观看者。

在[应用位置]添加“翻转进入”(Flip In)入场动画，也叫 flip in X 或 flip in Y。
元素从侧面朝向开始，绕水平轴旋转到正对观看者，略微转过头再回来后稳定：迅速，带一点晃动。
加上透视(perspective)让旋转有纵深感；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接以正面状态显示，不做动画。

元素做 3D 旋转，直到侧面朝向、看不见为止。

在[应用位置]添加“翻转退出”(Flip Out)退场动画，也叫 flip out X 或 flip out Y。
元素先稍微向后倾斜，再绕竖直轴旋转到侧面朝向并消失：迅速、干脆。
加上透视(perspective)让旋转有纵深感，等旋转结束后再移除元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素以左上角为铰链摆动、晃荡几下，然后掉出屏幕。

在[应用位置]添加“铰链掉落”(Hinge)退场动画。
元素像螺丝松脱一样以左上角为轴向下摆，来回晃荡，然后一边淡出一边掉出屏幕：缓慢、滑稽、刻意。
让它从其他内容上方掉落，不要挤动布局或产生滚动条，掉落后移除元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素从缩小且倾斜的状态弹出，略微超出后稳定下来，就像玩偶盒里的弹簧小丑。

在[应用位置]添加“玩偶盒弹出”(Jack In The Box)入场动画。
元素以底边为支点，从很小且倾斜的状态弹出，越过竖直位置左右摇摆，然后稳定下来：有弹性、俏皮。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素带着倾斜从侧面疾速冲入，落定时恢复端正。

在[应用位置]添加“光速进入”(Light Speed In)入场动画，也叫 lightspeed in。
元素像高速飞驰一样倾斜着从侧面疾速冲入，倾斜先反向过冲一次，落定时恢复端正：快速而有戏剧性，末尾减速。
元素还在屏幕外时不要产生横向滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素倾斜着向侧面疾速离开，同时淡出。

在[应用位置]添加“光速退出”(Light Speed Out)退场动画，也叫 lightspeed out。
元素倾斜着向侧面疾速离开，同时淡出：要快，离开时逐渐加速。
越过边缘时不要产生横向滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素从放大、模糊、透明的状态缩小到清晰，像一团烟雾聚拢；离开时则反向进行。

在[应用位置]添加“烟雾进出”(Puff In / Puff Out)动画，也叫 puff。
出现时，元素从放大、模糊、透明的状态缩小到清晰，像一团烟雾慢慢落定；离开时再膨胀成一片模糊并消失：柔和、较快。
放大状态不要挤动布局或产生滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接切换。

元素像轮子一样从左侧滚入，同时淡入。

在[应用位置]添加“翻滚进入”(Roll In)入场动画。
元素像轮子一样边转动边从左侧滚入，同时淡入：平滑，落定时减速。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素向右滚出，同时淡出。

在[应用位置]添加“翻滚退出”(Roll Out)退场动画。
元素像轮子一样边转动边向右滚出，同时淡出：平滑，离开时加速。
等它完全滚走后再从布局中移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素绕某个角或自身中心旋转进入，同时淡入。

在[应用位置]添加“旋转进入”(Rotate In)入场动画，也叫 rotate in down left。
元素从倾斜的角度出发，绕左下角旋转到位，同时淡入：平滑、从容，落定时逐渐减速。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素绕一个支点旋转，同时淡出消失。

在[应用位置]添加“旋转退出”(Rotate Out)退场动画。
元素绕自身中心旋转略多于半圈，同时淡出：平滑，逐渐加速。
旋转结束后再移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素从容器边缘之外滑入到停靠位置，不带淡入效果。

在[应用位置]添加“滑入”(Slide In)入场动画，也叫 slide in left、slide in right、slide in up 或 slide in down。
元素从容器边缘之外滑到停靠位置，全程保持完全不透明：快速，平滑减速，不要回弹。
在容器边缘处裁切，避免它在外面时遮住相邻元素或产生滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示。

元素滑出容器边缘后消失。

在[应用位置]添加“滑出”(Slide Out)退场动画，也叫 slide out up 或 slide out down。
元素保持完全不透明，滑出容器边缘后消失：快速，离开时加速。
在容器边缘处裁切，移出视野后对键盘和屏幕阅读器也隐藏；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

一组元素依次以微小的时间差播放动画，形成波浪般的效果，而不是同时出现。

在[应用位置]添加“交错动画”(Stagger)，也叫 staggered animation 或级联(cascade)。
让各项以短而均匀的间隔依次上浮出现，整体看起来像一道快速的波浪，而不是同时出现。
即使列表很长也要让整个过程保持简短；滚动进入视口时只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。

元素从一个点旋转放大，同时淡入。

在[应用位置]添加“漩涡进入”(Swirl In)入场动画，也叫 swirl in forward。
元素从一个点放大到完整尺寸，同时旋转远超一整圈并淡入：开始很快，落定时逐渐减速。
只对单个元素播放一次，不要用于整组元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

字母起初间距很宽且较淡，随后在显现的同时收拢到正常字距。

在[应用位置]添加“字距收拢进入”(Tracking In)文字动画，也叫 text tracking in 或 letter-spacing in。
字母起初间距很宽且较淡，然后逐渐收拢到正常字距并完全显现：平滑，末尾减速。
字距变化期间让文字保持居中且不换行，避免周围布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接以正常字距显示。

元素从小而透明的状态放大到完整尺寸，同时淡入。

在[应用位置]添加“缩放进入”(Zoom In)入场动画，也叫 scale in。
元素从小而透明放大到完整尺寸，同时淡入：快速、平滑，不要过冲。
以中心为基点缩放，不影响周围布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素缩小并淡出，直至消失。

在[应用位置]添加“缩放退出”(Zoom Out)退场动画，也叫 scale out。
元素朝中心缩小并淡出，直至消失：快速，逐渐加速。
完全消失后再从布局和键盘焦点中移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素上下弹跳，弹跳幅度逐渐减小。

在[应用位置]添加“弹跳”(Bounce)提示效果。
元素向上跳起再落下，快速弹跳几次，每次幅度越来越小，落地时略微压扁。
触发时只播放一次，不要循环；对开启了“减少动态效果”的用户则跳过。

元素通过快速切换不透明度来闪烁。

在[应用位置]添加“闪烁”(Flash)提示效果，也叫 blink。
元素快速淡出再淡入，闪烁两次，然后保持完全可见。
只播放一次，不要无休止地闪烁；快速闪烁可能让人不适，所以对开启了“减少动态效果”的用户则跳过。

元素的不透明度像接触不良的灯一样不规则地闪动。

在[应用位置]添加“频闪”(Flicker)效果，也叫 flickering。
元素大部分时间保持稳定，偶尔像接触不良的霓虹灯一样短促、不均匀地变暗。
节奏要不规则而不是等间隔，避免全强度的快速闪烁；对开启了“减少动态效果”的用户则停止。

元素带着轻微旋转左右摆动，就像摇头表示“不”。

在[应用位置]添加“摇头”(Head Shake)提示效果，也叫 headshake 或 no shake。
元素要像摇头表示“不”一样，带着轻微扭转快速左右转动，每次幅度都比上一次小，最后停稳。
每次触发时只播放一次（比如操作被拒绝时），并且不要让周围的布局跟着移动。

元素以双拍节奏缩放，就像跳动的心脏。

在[应用位置]添加“心跳”(Heartbeat)效果，也叫 heart beat。
元素要快速地连续膨胀、回缩两次，然后稍作停顿再开始下一次，就像跳动的心脏。
无缝循环播放并保留两次心跳之间的停顿；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止动画。

元素像晃动的果冻一样来回倾斜变形，幅度逐渐减小。

在[应用位置]添加“果冻”(Jello)提示效果，也叫 jelly。
元素要像晃动的果冻一样来回倾斜变形：一开始幅度大，然后很快平息下来。
触发时只播放一次，并保持元素占据的空间不变，避免周围内容移位。

元素的副本反复放大并淡出，就像雷达波纹。

在[应用位置]添加“雷达扩散”(Ping)效果，也叫雷达波(radar ping)或脉冲环(pulse ring)。
元素的一个副本要向外扩大并淡出，以稳定的节奏一遍遍重复，而元素本身保持不动。
把圆环画在单独的图层上，确保它永远不影响布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止循环。

元素反复地轻柔缩放或淡入淡出。

在[应用位置]添加“脉冲”(Pulse)效果，也叫 pulsing。
元素要以缓慢、稳定的节奏轻轻膨胀再回缩：含蓄，不要有弹跳感。
无缝循环播放，不要让周围布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止动画。

元素横向拉伸、纵向压扁，经过几次弹性变化后恢复原状。

在[应用位置]添加“橡皮筋”(Rubber Band)提示效果，也叫 rubberband。
元素要先横向拉宽、纵向压扁，再经过几次越来越小的弹性回弹，最后停在正常大小。
触发时只播放一次，并确保拉伸过程中周围布局不会移位。

元素沿一个方向快速来回抖动。

在[应用位置]添加“抖动”(Shake)效果，也叫 error shake 或 invalid input shake。
元素要快速左右抖动几次，然后正好停在起始位置：快速、干脆。
每次出错时播放一次，不要循环；同时显示可见的错误提示，让含义不只依赖动画来传达。

元素以恒定速度持续旋转。

在[应用位置]添加“无限旋转”(Spin)效果，也叫 spinner 或 rotate loop。
元素要以恒定、均匀的速度持续旋转，每圈之间不要有缓动。
让循环无缝衔接，给 spinner 加上无障碍的“加载中”标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就放慢或停止旋转。

元素以顶边为支点，像钟摆一样来回摆动，幅度逐渐减小。

在[应用位置]添加“摇摆”(Swing)提示效果。
元素要像悬挂的招牌一样来回摆动，一开始摆幅很大，然后很快平息。
以顶边而不是中心为支点摆动，触发时只播放一次。

元素放大后带着旋转左右晃动，再恢复原来大小，像在庆祝一样。

在[应用位置]添加“庆祝抖动”(Tada)提示效果。
元素要先微微缩小，再放大并快速倾斜着左右晃动，然后恢复正常大小，像一次小小的庆祝。
只播放一次（比如在操作成功后立即播放）；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就跳过这个动画。

元素向各个方向快速地细微颤动，就像手机在震动。

在[应用位置]添加“震动”(Vibrate)提示效果，也叫 buzz 或 vibration。
元素要像手机震动一样，向不同方向快速地细微颤动片刻，然后停下来。
动作幅度要非常小，确保内容仍然清晰可读；每次提醒只播放一次，不要循环。

元素像不稳的物体一样，带着倾斜左右摇晃。

在[应用位置]添加“晃动”(Wobble)提示效果。
元素要带着倾斜左右摇晃，一开始幅度很大，每摆一次就变小，直到停稳。
触发时只播放一次，并避免相邻内容移位。

向下滚动时头部隐藏，向上滚动时重新出现。

在[应用位置]添加“滚动隐藏头部”(Hide on Scroll Header)，也叫 headroom 或自动隐藏导航栏(auto-hide navbar)。
用户向下滚动时，头部要向上滑出视野；只要向上滚动，就滑回来：快速、流畅，根据滚动方向而不是距离来反应。
在页面最顶部时始终显示，忽略细微的滚动抖动，并且当头部内有元素获得键盘焦点时保持显示。

纵向滚动时，一排被固定的面板横向移动。

在[应用位置]添加“横向滚动区块”(Horizontal Scroll Section)，也叫 horizontal scrolling 或 scroll-jacked horizontal gallery。
区块到达顶部时要固定住，向下滚动时让其中的一排面板横向移动，最后一个面板出现后再解除固定。
横向移动要直接跟随滚动位置，往回滚动时反向移动；在小屏幕上，或者如果用户开启了“减少动态效果”(prefers-reduced-motion)，就改为可以正常滑动的横排。

滚动时各图层以不同速度移动，营造出纵深感。

在[应用位置]添加“视差滚动”(Parallax)效果，也叫 parallax scrolling 或视差图层(parallax layers)。
页面滚动时，背景图层要比内容移动得慢，越远的图层移动越少，营造含蓄的纵深感。
让效果紧跟滚动位置、没有延迟，文字放在正常速度的图层上；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭这个效果。

在一段滚动范围内，元素固定在原位，其他内容或动画继续推进。

在[应用位置]添加“滚动固定”(Pinning)效果，也叫固定区块(pinned section)或 sticky section。
旁边的内容随滚动经过时，一个面板要固定在原位，并随正在阅读的步骤切换内容，区块结束时再解除固定。
优先使用原生的 sticky 定位，而不是劫持滚动；并确保在小屏幕上即使没有固定面板，每个步骤也依然易读。

随着用户滚动页面或文章，进度条或圆环逐渐填满。

在[应用位置]添加“滚动进度条”(Scroll Progress Indicator)，也叫阅读进度条(reading progress bar)。
顶部的一条细条要随着读者滚动的距离从左向右填充，到末尾时铺满整个宽度。
直接绑定滚动位置，不要有缓动延迟，也不要遮挡内容。

滚动停止时会吸附到预设的位置，例如幻灯片或区块。

在[应用位置]添加“滚动吸附”(Scroll Snap)，也叫 scroll snapping 或 snap scrolling。
滚动停下时，视图要干净利落地吸附到最近的区块，让每个区块都对齐边缘，而不是停在半中间。
使用浏览器原生的吸附功能，让滚轮、触摸和键盘滚动都照常可用，并确保比视口更高的内容也能完整阅读。

动画进度直接绑定滚动位置，向前滚动时播放，向回滚动时倒放。

在[应用位置]添加“滚动驱动动画”(Scroll-Linked Animation)，也叫 scroll-driven animation 或滚动擦洗(scroll scrub)。
动画要严格跟随滚动位置：向下滚动时正向播放，向上滚动时当场倒放，自身不带基于时间的缓动。
把整段动画映射到一个明确的滚动区间；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就显示一个合理的静态状态。

元素进入或离开视口时，动画播放一次。

在[应用位置]添加“滚动触发动画”(Scroll-Triggered Animation)，也叫滚动显现(reveal on scroll)或 animate on scroll。
每个元素进入视口时只播放一次：淡入并向上滑到位，按自己快速顺滑的节奏播放，而不是跟随滚动位置。
脚本加载失败时内容也要可见；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接显示元素。

滚动和锚点跳转带缓动地平滑滑动，而不是生硬地跳动。

在[应用位置]添加“平滑滚动”(Smooth Scroll)，也叫 smooth scrolling 或惯性滚动(inertia scroll)。
滚动和锚点跳转要顺滑地滑动并缓缓停下，而不是一顿一顿地跳动；手感要轻快灵敏，不要沉重拖沓。
保留键盘滚动、滚动条、页内查找等原生行为；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭平滑效果。

滚动时卡片吸附在顶部并层层叠放，先前的卡片通常会略微缩小。

在[应用位置]添加“滚动堆叠卡片”(Stacking Cards)，也叫 sticky stacking cards 或 card stack scroll。
滚动时，每张卡片吸附在顶部附近，下一张卡片从下方滑上来盖住它，下面的卡片略微缩小，叠成整齐的一摞。
让每张先前的卡片露出一道细边，并给最后一张卡片留足空间，让它在区块结束前滑到位。

用户向下滚动后，吸顶头部的高度或尺寸会缩小。

在[应用位置]添加“吸顶头部收缩”(Sticky Header Shrink)，也叫 shrinking header 或 shrink on scroll。
头部固定在顶部，读者稍微向下滚动后，平滑地收缩成更窄的条、Logo 也变小；回到顶部时再恢复原样。
头部尺寸变化时，不要让下方内容跳动。

页面纵向滚动时，大号文字行横向滑动。

在[应用位置]添加“滚动文字跑马灯”(Text Marquee on Scroll)，也叫 scroll text marquee 或 scroll velocity text。
页面向下滚动时，大号文字行横向滑动，相邻行朝相反方向移动；向上滚动时再滑回来。
让移动绑定滚动位置，不要让长文字行产生横向滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。

随着用户滚动，元素或场景放大或缩小。

在[应用位置]添加“滚动缩放”(Zoom on Scroll)效果，也叫 scroll zoom 或 scale on scroll。
区块停留在视口中时，元素要随着滚动从一张小卡片平滑放大，直到铺满整个视口；向上滚动时再缩回去。
缩放时不要挤动周围的布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接以最终尺寸显示，不做缩放。

文字以渐变填充，颜色持续变换或流动。

在[应用位置]添加“动态渐变文字”(Animated Gradient Text)效果，也叫极光文字(aurora text)或 rainbow text sweep。
文字用渐变填充，颜色在文字上缓慢、顺滑地流动，无缝地无限循环。
任何时刻文字都要在背景上清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让颜色保持静止。

文字像信号故障一样抖动，出现切片错位和红青色分离。

在[应用位置]添加“故障文字”(Glitch Text)悬停效果，也叫 text glitch 或 RGB 分离故障(RGB split glitch)。
指针停在文字上时，文字以快速、利落的阵发方式抖动：细细的横向切片左右跳动，两份彩色副本像信号故障一样错开；指针移开后恢复原状。
真实文字在文档中只保留一份，避免屏幕阅读器读出副本；键盘聚焦时也显示同样的效果。

文字呈现流转的彩虹箔片反光，随指针或时间移动。

在[应用位置]添加“全息文字”(Holographic Text)悬停效果，也叫全息箔片文字(holographic foil text)。
指针停在文字上时，一道箔片般的彩色光带在字母上缓慢、顺滑地来回滑动；指针移开后，文字恢复原本的朴素样子。
光泽流动的任何时刻文字都要清晰可读；键盘聚焦时也显示同样的效果。

文字不再是静态文案，而是作为运动的图形元素缩放、移动或旋转。

在[应用位置]添加“动态排版”(Kinetic Typography)，也叫 kinetic text。
一行行重复的大号文字以缓慢、稳定的节奏交替朝相反方向横向滑动，让文字本身变成运动的图形。
每一行都要无缝循环、看不出跳接，屏幕阅读器只读一遍文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止运动。

悬停时字母四散飞开再归位，或在入场时向外迸散。

在[应用位置]添加“文字飞散”(Letter Scatter)悬停效果，也叫 scatter gather letters 或 explosive letter burst。
指针移到文字上时，每个字母带着一点旋转朝各自方向飞出一小段；指针移开后再顺滑地聚拢回原来的单词。
字母移动时，单词在布局中占的位置保持不变，屏幕阅读器要把它当作一个词来读；键盘聚焦时也显示同样的效果。

字母后方的条纹或错位阴影朝一个方向移动。

在[应用位置]添加“线条阴影文字”(Line Shadow Text)效果，也叫 text shadow animation 或 dancing shadow。
字母后方由细斜条纹组成的错位阴影缓慢、持续地滑动，字母本身保持静止、清晰。
条纹的移动要无缝循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让阴影保持静止。

字母中注入不断上升、起伏荡漾的液体。

在[应用位置]添加“液体填充文字”(Liquid Fill Text)效果，也叫 water fill text。
描边的字母中注满液体，波浪状的液面横向翻滚，液位缓慢地起伏，形成柔和、连续的循环。
单词要保留为真实文本供屏幕阅读器读取；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让液体停在一个静止的液位。

文字从一条裁切线后方向上滑出，仿佛凭空出现。

在[应用位置]添加“遮罩显现”(Mask Reveal)文字入场效果，也叫行遮罩显现(line mask reveal)或文字遮罩(text masking)。
每一行文字从一条看不见的边缘后方向上滑出，仿佛凭空出现，一行接一行，快速顺滑，不要有弹跳感。
文字滚动进入视口时只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示文字，不做动画。

绿色字符像《黑客帝国》里的代码雨一样成列落下。

在[应用位置]添加“数字雨文字”(Matrix Text)效果，也叫 digital rain text。
一列列字符以略有差异的速度稳定落下，每列最前面的字符明亮，后面拖着逐渐淡去的尾迹。
把它当作对屏幕阅读器隐藏的装饰，保持轻量；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止动画。

字母向下滴落、拉长，仿佛正在融化。

在[应用位置]添加“融化文字”(Melting Text)效果。
字母缓慢向下塌陷，下方拉出滴落的液滴，仿佛正在融化，最后停在静止的融化形态。
文字进入视口时只播放一次，结束时保持文字可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则不做动画。

一个词在同一位置模糊并融合成下一个词。

在[应用位置]添加“文字变形”(Morphing Text)效果，也叫 text morph。
一个词在同一位置变模糊，以柔和、黏稠的方式融合成下一个词，然后停留片刻再进行下一次切换。
词语之间无缝循环，让屏幕阅读器把这些词当作普通文字读出；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止循环。

文字像霓虹灯管一样发光，并闪烁或脉动。

在[应用位置]添加“霓虹发光文字”(Neon Glow Text)效果，也叫霓虹招牌闪烁(neon sign flicker)或发光文字(glowing text)。
文字像霓虹灯管一样发出柔和、稳定的光，偶尔像真实招牌那样短暂熄灭一下。
闪烁要偶尔出现而不是快速连闪，因为快速闪光可能伤害部分用户；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持稳定发光。

用户滚动经过各个章节时，标题的字母依次变换或移动。

在[应用位置]添加“滚动字母”(Scrolling Letters)效果，也叫 on-scroll letter animations。
用户滚动经过各章节时，标题的字母从左到右依次滚动到下一个字符，并直接跟随滚动位置变化。
向上滚回时字母要滚回原样，屏幕阅读器要以普通文字获取当前标题。

一道亮光反复扫过文字。

在[应用位置]添加“流光文字”(Shimmer Text)效果，也叫 animated shiny text 或金属流光文字(metallic shimmer text)。
一条光带从左到右顺滑地扫过文字，短暂停顿后再重复。
高光经过时文字仍要清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。

标题被切成若干水平切片，页面滚动时切片彼此错开、横向移动。

在[应用位置]添加“切片文字”(Sliced Text)效果，也叫 on-scroll sliced text。
把一个大标题切成若干水平切片，开始时对齐成完整的词，用户滚动时切片彼此错开、横向滑动。
让错位直接跟随滚动位置，往回滚动时随之还原；对屏幕阅读器保持标题为一段完整可读的文字。

文字沿圆周排列，并持续旋转。

在[应用位置]添加“环形旋转文字”(Spinning Text)，也叫环形文字(circular text)或 text on circle。
字母沿圆周均匀排列，整个圆缓慢、匀速地旋转，循环重新开始时不能有跳动。
只向屏幕阅读器提供一次普通文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止旋转。

标题被拆分成字符、单词或行，以短暂延迟依次动画入场。

在[应用位置]添加“拆分文字交错”(Split Text Stagger)入场效果，也叫逐字交错(letter stagger)或 staggered text reveal。
把标题拆成单个字母，字母之间留出短暂延迟，依次上移并淡入，快速顺滑，不要有弹跳感。
标题进入视口时只播放一次，让屏幕阅读器把它当作一个完整的词读出；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。

字符像机场航班显示牌一样翻动，直到停在目标字母上。

在[应用位置]添加“翻牌文字”(Split-Flap Text)效果，也叫翻牌板(text flipping board 或 flip board)。
每个字符格快速翻过字母表，直到停在目标字母上，各字符格从左到右依次停稳。
每次文字出现或变化时运行一次，只向屏幕阅读器播报最终文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不翻动，直接显示最终文字。

借助 SVG 置换滤镜，字母边缘像手绘一样抖动。

在[应用位置]添加“手绘抖动文字”(Squiggly Text)效果，也叫 wobbly text 或 turbulence text。
字母边缘轻微抖动，就像每秒被手工重画好几次：是含蓄、细碎的抖动，而不是顺滑的波浪。
保持文字可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。

文字固定不动，各行随滚动进度淡入淡出。

在[应用位置]添加“吸顶文字淡入淡出”(Sticky Text Fade)效果，也叫 sticky scroll text opacity fade。
该区块滚动期间，文字块固定在原位，各行随滚动进度逐行淡入淡出。
让淡入淡出直接跟随滚动位置，往回滚动时随之反转；无论透明度如何，每一行都要能被屏幕阅读器读到。

先以描边绘出字母轮廓，再显示填充。

在[应用位置]添加“描边文字绘制”(Stroke Text Draw)效果，也叫 draw in text 或 animated stroke text。
字母轮廓顺滑地逐笔画出，轮廓完成后填充再淡入。
页面加载时只播放一次，让文字保持为可访问的真实文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示已填充的文字。

字母或单词绕轴做 3D 翻转，露出背面的下一段文字。

在[应用位置]添加“文字3D翻转”(Text 3D Flip)悬停效果，也叫 3D flip text reveal。
指针移到文字上时，每个字母绕水平轴做 3D 翻转，露出另一面的新字母，一个接一个快速顺滑地扫过；指针移开时再翻回来。
翻转过程中保持文本框尺寸不变，键盘聚焦时也显示同样的效果。

文字随滚动或指针移动自然地扭曲、起伏。

在[应用位置]添加“文字扭曲”(Text Distortion)效果，也叫 organic text distortion。
一行文字不断横向流动，同时自然地扭曲、起伏，仿佛隔着流动的水去看，流动由用户的滚动驱动。
扭曲要足够轻，保证文字可读，在较慢的设备上也要流畅；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭该效果。

页面加载时，文字逐个淡入，常伴随模糊逐渐消散，仿佛正在生成。

在[应用位置]添加“文字生成”(Text Generate)效果。
文字逐个淡入，同时每个词上的柔和模糊逐渐消散，仿佛文本正在生成：节奏平稳、沉静。
页面加载时只播放一次，让屏幕阅读器立即读到完整文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。

一条荧光笔般的色带划过短语，将其突出强调。

在[应用位置]添加“荧光笔高亮”(Text Highlighter)效果，也叫高亮标记(highlight marker)或马克笔下划线(marker underline)。
一条荧光笔般的色带从左到右平滑地划过关键语句的背后，就像有人用笔把它标出来。
在语句滚动进入视口时只播放一次，保证色带上的文字清晰可读，并且在语句换成两行时让色带正确跟随。

描边文字被跟随指针或横扫而过的渐变填充或点亮。

在[应用位置]添加“文字悬停效果”(Text Hover Effect)，也叫悬停文字填充(text fill on hover)或渐变描边文字悬停(gradient outline text hover)。
文字起初只有描边；指针停在上面时，实色填充从左到右平滑地扫入，指针移开后再退回去。
填充前的描边文字也要清晰可读，并且在键盘聚焦时呈现同样的效果。

文字沿曲线路径排列，并随用户滚动沿路径移动。

在[应用位置]添加“路径文字滚动”(Text Path Scroll)效果，也叫 text path curve scroll animation。
文字排在一条曲线上，随用户滚动沿曲线滑动：向下滚动时前进，向上滚动时后退。
让移动直接绑定滚动位置、没有延迟，并让屏幕阅读器把它当作普通文本读取。

一个词被复制成许多层叠的副本，随滚动错开移动。

在[应用位置]添加“文字重复”(Text Repetition)效果，也叫 repeated text scroll。
把一个词复制成一叠更淡的描边副本，随用户滚动从它身后展开，向上滚动时再收拢回去。
让展开程度直接绑定滚动位置，并对屏幕阅读器隐藏多余的副本，让这个词只被读一次。

原有文字以动画方式退出，并被新的文字内容替换。

在[应用位置]添加“文字替换”(Text Replacement)效果，也叫文字切换(text swap)。
文字变化时，旧字符向上滑出，新字符从下方滑入，逐个字符形成快速而流畅的波动。
切换过程中不要让文本框尺寸跳动，并且只向屏幕阅读器播报新文本。

随着用户滚动，段落中的文字从暗淡变为完全不透明。

在[应用位置]添加“文字显现”(Text Reveal)效果，也叫滚动文字显现(scroll text reveal)或逐词显现(word-by-word reveal)。
段落起初是暗淡的，随着用户滚动，每个词依次亮到完全清晰，与滚动位置绑定。
向上滚回时文字重新变暗；无论暗淡程度如何，整段文字都要始终能被屏幕阅读器读取。

在卡片上移动指针时，遮罩边缘或聚光灯下隐藏的文字随之显露。

在[应用位置]添加“文字显现卡片”(Text Reveal Card)效果，也叫聚光灯文字显现(spotlight text reveal)。
指针在卡片上移动时，一条竖直边缘紧紧跟随，在一侧露出隐藏的文字：流畅、直接，没有延迟。
在没有指针可跟随的触屏设备上，让拖动或点按也能显示隐藏文字，并让隐藏文字可被屏幕阅读器读取。

文字被不断刷新的随机字符替代，并逐渐还原成最终的词。

在[应用位置]添加“文字乱码解码”(Text Scramble)悬停效果，也叫文字解码(text decode)或加密文字(encrypted text)。
指针移到文字上时，每个字母快速闪过随机字符，再从左到右依次定格为真实字母。
乱码过程中文字宽度不要跳动，让屏幕阅读器始终读取真实文本，并且在键盘聚焦时呈现同样的效果。

文字跟随鼠标位置以 3D 透视方式倾斜转动。

在[应用位置]添加“文字倾斜”(Text Tilt)效果，也叫透视文字倾斜(perspective text tilt)。
文字随着指针移动平滑跟随，以 3D 方式轻轻朝指针倾斜，指针移开后再缓缓恢复平整。
倾斜幅度要含蓄，保证文字可读；在触屏设备上，以及如果用户开启了“减少动态效果”(prefers-reduced-motion)，文字保持平整不动。

字符像打字一样逐个出现，通常后面跟着一个闪烁的光标。

在[应用位置]添加“打字机”(Typewriter)效果，也叫打字动画(typing animation)或打字文字(typing text)。
字符以稳定的打字节奏逐个出现，最后一个已输入字符后面紧跟一个光标，打完后闪烁几次。
只播放一次、不要循环，让屏幕阅读器立即读到完整文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示完整文本。

悬停时，链接下方的下划线从一侧或中间延伸出来。

在[应用位置]添加“下划线绘制”(Underline Draw)悬停效果，也叫动画下划线(animated underline)或悬停下划线动画(hover underline animation)。
指针停在链接上时，文字下方的下划线从左到右平滑延伸，指针移开后再收回：快速而含蓄。
不要让下划线挤动周围布局，并且在键盘聚焦时呈现同样的效果。

借助可变字体的轴，字母平滑地变粗或变细（或改变宽度、倾斜度）。

在[应用位置]添加“可变字重动画”(Variable Font Weight Animation)悬停效果，也叫字重切换(font weight shift)。
指针停在文字上时，字母从左到右依次变粗，形成一道流畅的波浪；指针移开后再变细。
使用可变字体，让字重平滑变化而不是跳变；标题变宽时不要挤动附近内容，并且在键盘聚焦时呈现同样的效果。

大号字母如同窗口，里面显示正在播放的视频。

在[应用位置]添加“视频文字”(Video Text)效果，也叫文字视频遮罩(text video mask)。
让粗大的字母成为观看正在播放视频的窗口，动态画面只在字母形状内显示。
视频保持静音、循环播放且不显示控件，为屏幕阅读器提供真实的文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则显示一帧静止画面。

字母依次上下起伏，在整个词中形成流动的波浪。

在[应用位置]添加“波浪文字”(Wavy Text)效果，也叫文字波浪(text wave)。
字母依次上下起伏，让一道轻柔流畅的波浪不断穿过整个词。
无缝循环，让屏幕阅读器把它读作一个词；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止波浪。

句子中的一个词以滑动、翻转或淡入淡出的方式换成列表中的下一个词。

在[应用位置]添加“词语轮播”(Word Rotate)效果，也叫轮换词(rotating words)或翻转词(flip words)。
行内的一个词向上滑出，列表中的下一个词从下方滑入，每个词停留片刻后再切换。
词宽不同时不要让这一行的其余部分跳动，不要让屏幕阅读器播报每次切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止轮播。

一团有机形状持续不断地改变自身轮廓。

在[应用位置]添加“液态变形”(Blob Morph)循环动画，也叫 morphing blob 或 animated blob。
一团有机形状一边缓缓转动，一边不停地慢慢改变轮廓：流畅柔和，没有尖角。
循环要无缝衔接，形状不能跳变；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。

借助模糊与对比度滤镜，相邻的形状像液滴一样相互融合。

在[应用位置]添加“粘滞融合”(Gooey Effect)效果，也叫 goo effect 或元球(metaballs)。
指针悬停时，小液滴像液体一样从主体上拉长后脱离；指针移开后，它们流回来并平滑地融合在一起。
模糊加对比度滤镜只作用于这一小组形状，不要作用于整个页面；键盘聚焦和点按时也显示同样的效果。

汉堡菜单等图标通过线条的旋转和移动变成另一个图标（X）。

在[应用位置]添加“图标变形”(Icon Morph)，也叫汉堡变 X(hamburger to X)或 menu icon morph。
每次按下时，上下两条线先一起滑到中间，再旋转成 X，中间那条线同时淡出；再按一次则反向还原：干脆利落。
做成真正的切换按钮，无障碍标签和展开状态随之变化；图标尺寸保持固定，周围内容不发生位移。

通过为虚线偏移添加动画，让 SVG 描边看起来沿路径被画出来。

在[应用位置]添加“线条绘制”(Line Drawing)动画，也叫路径绘制(path drawing)或自绘 SVG(self-drawing SVG)。
每条描边看起来沿路径从起点到终点顺滑地自己画出来，第二条描边（比如对勾）紧跟在第一条之后。
进入视口时只播放一次，不要循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的线条。

元素沿自定义曲线路径移动，并可随路径旋转朝向。

在[应用位置]添加“运动路径”(Motion Path)动画，也叫 animate along path。
一个小元素沿自定义曲线路线缓慢、匀速地移动，并随时转向前进的方向。
使用闭合路线，让循环重复时没有跳变；路线要随容器缩放，而不是固定尺寸。

小圆点或图标沿圆形轨道绕中心旋转。

在[应用位置]添加“环绕轨道”(Orbiting Circles)，也叫 orbit animation 或 orbiting icons。
小圆点沿圆形轨道缓慢、匀速地绕中心元素旋转，外圈则以更慢的速度反向旋转。
循环要无缝，环绕的元素始终保持正立；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。

一个矢量形状平滑地变成另一个形状。

在[应用位置]添加“形状变形”(Shape Morph)，也叫路径变形(path morphing)或 SVG morph。
一个形状平滑地变成另一个形状，比如五边形向内收缩成星形，各个点以均匀、从容的节奏滑到位置上。
让两个形状拥有数量相同且一一对应的点，使变形干净、不闪烁；每次状态变化时播放一次，不要循环。

SVG 滤镜用动态噪声让文字或形状发生扭曲。

在[应用位置]添加“SVG置换扭曲”(SVG Displacement Distortion)悬停效果，也叫置换贴图效果(displacement map effect)。
指针悬停时，文字或形状像隔着流动的水一样荡漾晃动，效果柔和地渐入；指针移开后恢复清晰。
只在效果激活时应用扭曲滤镜，静止时不产生任何开销；键盘聚焦时也显示同样的效果。

遮罩形状划过或跟随指针，露出下方的内容。

在[应用位置]添加“SVG遮罩显现”(SVG Mask Reveal)悬停效果，也叫 clip-path reveal 或聚光灯遮罩(spotlight mask)。
指针悬停时，圆形遮罩从中心扩大，露出下方的内容；指针移开后再收拢：流畅且较快。
两个图层保持完全相同的尺寸，避免任何位移；键盘聚焦和点按时也显示同样的显现效果。

线条和圆点在地图或地球上的各个地点之间动态移动。

在[应用位置]添加“地图飞线”(Animated Map Arcs)，也叫 globe arcs。
曲线在点阵地图的各地点之间依次画出，随后向目的地收回，同时目的地处有一圈柔和的光环脉动：平静而稳定。
让各条弧线错开时间，绝不同步移动；循环要无缝；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则暂停播放。

柱子从零高度升至各自的数据值。

在[应用位置]添加“柱状图生长”(Bar Chart Grow)动画，也叫 animated bar chart 或 bar chart entrance。
各根柱子以快速的错开节奏依次从基线升到各自的数值，落定时平滑减速。
图表进入视口时只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示完成后的图表。

随着数值变化，水平条形的排名随时间不断交换。

在[应用位置]添加“动态排序条形图”(Bar Chart Race)，也叫 racing bar chart。
水平条形随数值随时间变化而伸缩，每当排名变化时平滑地彼此超越，每根条形都带着自己的标签。
用 transform 移动条形，而不是重新排列标记结构，让交换过程是滑动而不是跳变；并为用户提供暂停的方式。

数据变化或切换数据集时，图表元素从旧值平滑过渡到新值。

在[应用位置]添加“图表数据过渡”(Chart Data Transition)，也叫 chart update animation。
数据变化时，所有柱子同时从旧值平滑、从容地过渡到新值，而不是从零重新绘制。
每次更新都从屏幕上当前的数值开始，这样快速连续的第二次变化也不会跳变；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即应用新数值。

环形或饼图按顺时针方向填充到对应的百分比。

在[应用位置]添加“环形图填充”(Donut Chart Fill)动画，也叫 pie chart sweep 或 animated donut chart。
从顶部开始，各段依次顺时针扫出，直到圆环显示出各自的占比，结束时平滑减速。
图表进入视口时只播放一次，并以文本形式为屏幕阅读器提供实际数值。

数字进入可见区域时，从起始值计数到目标值。

在[应用位置]添加“数字递增”(Number Ticker)，也叫 count up 或 animated counter。
数字进入视口时，从零计数到目标值，开始时快，接近终点时柔和地放慢。
使用等宽数字，避免周围内容抖动；只计数一次；对屏幕阅读器以及开启了“减少动态效果”(prefers-reduced-motion)的用户，直接给出最终数值。

数字变化时，每一位都纵向滚动到新的值。

在[应用位置]添加“数字滚轮”(Odometer)数字动画，也叫 rolling numbers 或老虎机数字(slot-machine digits)。
数值变化时，每一位都纵向滚动到新的数字，始终向前滚动，各位之间略有错开，结尾有轻微的回稳。
让每一位数字宽度相同，避免整个数字位移；只向屏幕阅读器提供最终数值。

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

在[应用位置]添加“背景弹性扫入”(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)，也要关闭。

商品图片一边缩小一边沿弧线飞入购物车图标。

在[应用位置]添加“加购抛物线”(Add to Cart Fly)动画，也叫飞入购物车(fly to cart)或加购动画(add-to-cart animation)。
点击加购按钮时，商品图片的一个小副本一边缩小，一边沿一条流畅而快速的弧线飞入购物车图标，购物车在数量更新时轻轻弹一下。
每次点击只播放一次，不要移动原来的商品卡片；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就省略飞行动画，但照常更新购物车。

勾选时，方框内的对勾一笔一笔地画出来。

在[应用位置]添加“复选框勾选绘制”(Checkbox Check Draw)动画，也叫动画复选框(animated checkbox)或对勾绘制(checkmark draw)。
勾选时，方框填充颜色，对勾以一笔快速流畅的线条自己画出来；取消勾选时以同样方式擦除。
保持它是带选中状态的真正复选框，可以用键盘操作，并有清晰可见的焦点环。

彩色纸片喷涌而出再飘落下来，用来庆祝成功。

在[应用位置]添加“撒花”(Confetti)庆祝效果，也叫彩纸迸发(confetti burst)。
彩色小纸片从按钮中快速迸发出来，然后翻滚着飘落并渐渐淡出，形成一阵短促而热闹的纸片雨。
每次成功只触发一次，不要循环，不要挡住页面上的点击；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不要播放。

复制图标变成对勾，标签短暂显示“已复制”。

在[应用位置]添加“复制成功反馈”(Copy-to-Clipboard Feedback)动画，也叫已复制状态(copied state)或复制图标变对勾(copy icon to checkmark)。
点击复制按钮时，复制图标快速缩小消失，同时画出一个对勾，标签变为“已复制”，片刻之后一切平滑地恢复原样。
切换过程中保持按钮尺寸不变，不让任何东西位移，并把已复制状态告知屏幕阅读器。

拖拽时元素跟随指针移动，并可以限制在某个区域或某条轴上。

在[应用位置]添加“拖拽”(Drag)交互，也叫可拖拽(draggable)或拖拽约束(drag constraints)。
拖拽时元素直接跟随指针，在允许区域的边缘停住，松开后带一点回弹地弹回静止位置。
触摸和鼠标都要能用，拖动时下面的页面不能跟着滚动，并提供用键盘移动它的方式。

输入框获得焦点或已有内容时，占位标签上移并缩小到输入框上方。

在[应用位置]添加“浮动标签”(Floating Label)，也叫浮动标签(float label)或动画占位符(animated placeholder)。
输入框获得焦点或已有值时，原本在框内的标签平滑而快速地上移并缩小，停到输入框的上边缘；只有在输入框为空且失去焦点时才落回原处。
保持它是与输入框关联的真正 label，并确保输入框高度不变，让表单永远不会跳动。

点击时爱心图标填充颜色，并迸发出小粒子或跳动一下。

在[应用位置]添加“点赞爱心”(Like / Heart Burst)动画，也叫爱心动画(heart animation)或收藏切换(favorite toggle)。
点赞时爱心填充颜色并带弹性地弹一下，同时一圈光环和小圆点向外迸发并淡出，整体快速、俏皮；取消点赞时爱心只是安静地变空。
做成带按下状态的真正切换按钮，只在开启时播放迸发效果。

按住元素片刻即可触发额外操作或进度填充。

在[应用位置]添加“长按”(Long Press)交互，也叫 press and hold 或 touch and hold。
按住时元素轻微下沉，同时进度填充以稳定的速度扫过它；填满后元素带弹性地回弹并打开菜单，提前松开则取消并重置填充。
为键盘和屏幕阅读器用户提供另一种途径来执行相同操作，并且不要让长按触发文本选择或浏览器自带的右键菜单。

收到新通知时，数字徽标弹出、弹跳或脉动。

在[应用位置]添加“徽标弹跳”(Notification Badge Bounce)动画，也叫 badge pop 或 ping。
收到新通知时，数字徽标从无到有地弹出，带着两下快速、有弹性的跳动落定，同时一圈柔和的光环从它向外扩散一次。
每条新通知只播放一次，不要循环，并让屏幕阅读器播报新的数字。

显示或隐藏密码时，眼睛图标在睁开和带斜线之间切换。

在[应用位置]添加“密码显隐切换”(Password Reveal Toggle)，也叫 show/hide password 或眼睛图标切换(eye icon toggle)。
点击眼睛时斜线迅速擦除，隐藏的圆点交叉淡入为真实字符；再次点击时斜线重新画出并隐藏字符：流畅、迅速，不要弹跳。
保持输入框宽度不变以免文字跳动，并把切换做成真正的按钮，用标签说明当前密码是否可见。

文字滚动进入视口时，一个指针箭头围绕某个词画出高亮框。

在[应用位置]添加“指针高亮”(Pointer Highlight)效果。
文字滚动进入视口时，一个方框从左到右围绕关键词画出，同时一个小指针箭头沿着方框的角移动，流畅、匀速，就像有人在用手圈出这个词。
只在第一次进入视口时画一次，不要挤动文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的方框。

按下时元素略微缩小，松开后带弹性地恢复。

在[应用位置]添加“按压缩放”(Press (Button Tap Scale))效果，也叫点击反馈(tap feedback)或按下状态(press state)。
按下时元素略微缩小并稍微变暗，松开后带一点弹跳恢复到原大小：快速、含蓄。
键盘按下和触摸时也显示同样的反馈，并保持周围布局不发生位移。

向下拖动列表会露出加载图标，松开后重新加载内容。

在[应用位置]添加“下拉刷新”(Pull to Refresh)交互，也叫 swipe to refresh。
从顶部向下拉列表时，列表带着一点阻力跟随手指，并露出一个随拉动旋转的加载图标；松开后加载图标在内容重新加载期间持续旋转，完成后列表平滑地收回顶部。
只在列表已经滚动到顶部时才触发，并为键盘和屏幕阅读器用户另外提供一个普通的刷新按钮。

圆形波纹从点击或轻触的确切位置扩散开并淡出。

在[应用位置]添加“水波纹”(Ripple)效果，也叫 material ripple 或 ink ripple。
每次点击或轻触时，一圈柔和的圆形波纹从按下的确切位置向外扩散，直到覆盖整个元素，边扩散边淡出：快速、轻盈。
波纹要按元素的形状裁切，快速连续按下时每次都产生新的波纹，用键盘按下时从中心开始扩散。

圆圈和对勾自行画出，确认操作已成功。

在[应用位置]添加“成功对勾”(Success Checkmark)动画，也叫 animated success tick。
先用一笔流畅的线条画出圆圈，接着在圆圈内画出对勾，整个图标再轻轻弹一下：沉稳、笃定。
操作成功时只播放一次，配上屏幕阅读器能播报的文字提示；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的图标。

横向滑动列表行，露出删除或归档等操作按钮。

在[应用位置]添加“滑动删除”(Swipe to Delete)交互，也叫 swipe actions 或 swipe to reveal。
横向拖动某一行时，它直接跟着手指移动，露出后面的归档、删除等操作按钮，按钮完全露出后停住；松开后平滑地滑到位，不要回弹。
横向滑动时仍要保证纵向滚动可用，并让键盘和屏幕阅读器用户无需滑动也能执行相同操作。

圆形滑块沿轨道滑动，轨道颜色在关和开之间切换。

在[应用位置]添加“开关切换”(Toggle Switch)动画，也叫 switch。
打开或关闭时，圆形滑块平滑地滑到轨道另一端，同时轨道颜色随之变化：快速、干脆，不要弹跳。
做成真正可访问的开关(带 checked 状态的 role="switch")，并且支持键盘操作。

文本插入光标会随旁边字符的大小变长或变短。

在[应用位置]添加“自适应插入光标”(Adaptive Caret)效果，也叫 adaptive caret size。
文本插入光标移动到离指针最近的字符前面，并迅速拉长或缩短到与该字符同高，尺寸变化流畅利落，不要弹跳。
保持文字本身不移动，并让光标像跟随指针一样跟随键盘移动。

圆形光标通过 mix-blend-mode 的 difference 模式反转其下方的颜色。

在[应用位置]添加“混合模式光标”(Blend-Mode Cursor)，也叫 difference cursor 或反色光标(inverting cursor)。
用一个实心圆替换指针，它毫无延迟地紧贴在指针下方，并反转所经过的文字和图形的颜色。
把混合效果限制在这块区域内，不要和页面其他部分混合；确保在深色模式下也能清晰反色，触屏设备上则保留普通光标。

一个形状或标签带着弹性或缓动的延迟跟随指针。

在[应用位置]添加“光标跟随”(Cursor Follower)效果，也叫 following pointer 或 smooth cursor。
一个小圆点标记以柔和的缓动延迟跟随指针，并平滑滑行到指针停下的位置正好停住，不要弹跳。
保留真实指针可见，标记绝不能挡住点击，触屏设备上不显示它。

悬停在文字列表项上时，一张预览图片跟随指针移动。

在[应用位置]添加“悬停图片跟随”(Cursor Image Hover)效果，也叫 hover image follow 或悬停图片预览(image preview on hover)。
指针停在文字列表项上时，该项的一张小预览图浮在指针旁边，带着轻微、流畅的延迟跟随指针；指针移到另一项时，预览图滑动切换到下一张。
预览图绝不能挡住列表的点击；在触屏和键盘操作下，即使没有预览图，列表也要完全可用。

指针周围的一圈光照亮内容，其余部分保持暗色。

在[应用位置]添加“光标聚光灯”(Cursor Spotlight)效果，也叫手电筒光标(flashlight cursor)或聚光灯效果(spotlight effect)。
一圈柔和的光跟随指针，照亮下方的内容，区域内其余部分保持变暗。
在触屏设备上没有可跟随的指针，改为直接完整点亮显示内容。

指针移动时，身后留下一串逐渐消失的图形。

在[应用位置]添加“光标拖尾”(Cursor Trail)效果，也叫鼠标拖尾(mouse trail)。
指针移动时，身后留下一小串小圆点，每个点都迅速缩小并淡出，让拖尾保持短小，顺滑地描出移动路径。
只在指针移动时绘制拖尾，绝不能挡住点击；在触屏设备上，或者如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不要显示。

默认箭头被替换为带样式的圆点或圆环，在可交互元素上方时会发生变化。

在[应用位置]添加“自定义光标”(Custom Cursor)，也叫动画光标(animated cursor)或光标替换(cursor replacement)。
用一个精确跟随指针的小圆点，加上一个稍稍落后跟随的圆环来替换默认箭头；悬停在链接和按钮上时，圆环平滑放大。
在触屏设备和文本输入框中保留普通光标，并且自定义光标绝不能挡住点击。

指针靠近时元素被吸向指针，离开后又弹回原位。

在[应用位置]添加“磁吸按钮”(Magnetic Button)效果，也叫磁吸目标(magnetic target)或磁吸悬停(magnetic hover)。
指针靠近时，按钮被轻轻吸向指针，按钮文字移动得再多一点；指针离开后，按钮带着一点小弹跳回到原位。
不要让周围布局跟着移动；在触屏设备上，或者如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭吸附。

一片短线条转向指针，就像磁铁周围的铁屑。

在[应用位置]添加“磁吸铁屑”(Magnetic Filings)效果。
一组网格排列的短线条立即转向，每一条都正对指针，就像磁铁周围的铁屑；没有指针时，全部朝向中心。
把它作为纯装饰背景，绝不能挡住点击；如果用户开启了“减少动态效果”(prefers-reduced-motion)，让线条保持静止。

切换标题时，内容面板平滑地展开到完整高度，或收起到零。

在[应用位置]添加“手风琴展开收起”(Accordion Expand-Collapse)效果，也叫折叠面板(collapse)或展开区(disclosure)。
点击标题时，面板平滑展开到内容的完整高度，再点一次则完全收起，标题上的箭头也跟着旋转：快速、顺滑，不要回弹。
按内容的真实高度做动画，而不是写死一个估计值；标题要用真正的按钮并标明展开状态，并且支持键盘操作。

一层半透明的深色遮罩在浮层后方淡入，让页面变暗。

在[应用位置]添加“遮罩层淡入”(Backdrop Scrim Fade)，也叫浮层淡入(overlay fade)或遮罩(scrim)。
浮层打开时，一层半透明的深色遮罩在后方页面上柔和地淡入，比浮层本身稍慢一点；关闭时再淡出。
无论浅色还是深色主题，遮罩都保持深色；遮罩显示期间，后方页面不能滚动，也不能响应点击。

面板从底部边缘向上滑出，通常可以拖动，并吸附到几个固定高度。

在[应用位置]添加“底部抽屉上滑”(Bottom Sheet Slide-Up)，也叫底部抽屉(bottom drawer)或面板(sheet)。
面板从底部边缘向上滑出，同时后方页面变暗，平滑减速停到位，不要回弹。
每次打开面板都播放一次，关闭时再滑回下方；面板打开期间，键盘焦点要留在面板内部。

幻灯片停在原处，彼此交叉淡化切换，而不是滑动。

在[应用位置]添加“轮播交叉淡化”(Carousel Crossfade)，也叫淡入淡出幻灯片(fade slideshow)或轮播淡化(carousel fade)。
幻灯片停在原处，缓慢地交叉淡化：旧的一张淡出的同时，下一张淡入，然后停留几秒再切换到下一张。
无缝循环回到第一张，鼠标悬停或获得焦点时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，不要自动切换。

幻灯片在可视区域内水平移动，每次吸附一张到位。

在[应用位置]添加“轮播滑动”(Carousel Slide)，也叫滑块(slider)或滑动轮播(swipe carousel)。
每一步都让整排横向滑动，使下一张幻灯片吸附到中间，平滑减速；两侧边缘露出相邻的幻灯片，位置圆点也跟着变化。
每次只移动一张，除了按钮和方向键，也支持触屏滑动，并给控件加上供屏幕阅读器读取的标签。

卡片展开成完整的详情视图，始终是同一个可见容器在改变形状并显示新内容。

在[应用位置]添加“容器变换”(Container Transform)过渡，也叫卡片展开到详情(card expand to detail)或可展开卡片(expandable card)。
打开卡片时，同一个容器平滑地扩展成完整的详情视图：旧内容迅速淡出，容器快要展开完时新内容再淡入；关闭时反向播放。
始终保持一个连续的容器，而不是在两个独立的框之间交叉淡化；打开后把焦点移到详情视图里。

拖动某一项时，其他项滑开让位，并按新的顺序排好。

在[应用位置]添加“拖拽排序列表”(Drag-to-Reorder List)，也叫可排序列表(sortable list)。
被拖动的项直接跟随指针并轻微抬起，其他项平滑地滑开让位；松开后，它迅速落入最近的位置。
同时支持触屏和鼠标，并提供用键盘移动项目的方式，把新位置播报给屏幕阅读器。

侧边面板从左、右或顶部边缘滑入，推开或覆盖页面内容。

在[应用位置]添加“抽屉滑入”(Drawer Slide)，也叫画布外菜单(off-canvas)或侧边面板(side sheet)。
面板从侧边滑入并覆盖在内容上方，同时后方页面变暗，速度快、平滑减速；关闭时按同样的方式滑出。
抽屉打开时把键盘焦点留在里面，可以用 Escape 键或点击变暗区域关闭，关闭后把焦点还给打开它的按钮。

布局变化后，元素平滑地移动到新的位置和尺寸。

在[应用位置]添加“FLIP布局动画”(FLIP Layout Animation)，也叫布局动画(layout animation)或 First-Last-Invert-Play。
布局变化时，每个元素从旧位置平滑移动到新位置，而不是直接跳过去：开始时快，最后轻柔地落定。
只用 transform 做动画，避免页面每一帧都重新排版；如果用户开启了“减少动态效果”(prefers-reduced-motion)，直接切换到新布局。

列表项添加时淡入并滑入，删除时以动画退出，相邻项随之补上空位。

在[应用位置]添加“列表项进出”(List Item Enter/Exit)动画，也叫动画列表(animated list)。
新项先撑开自己的空间，再淡入并滑入；被删除的项先淡出，再收起高度，让相邻项平滑地补上空位。
被删除的项要等退出动画结束后才移除，这样添加或删除项目时列表不会跳动。

一行内容横向无缝地无限循环滚动。

在[应用位置]添加“跑马灯”(Marquee)，即水平方向无限滚动的条带，也叫 ticker。
内容从右向左以缓慢、匀速的速度滚动，无缝循环，衔接处不能出现跳动。
鼠标悬停时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止滚动。

应用筛选或排序时，网格中的卡片重新排列、淡出或滑到新的位置。

在[应用位置]添加“瀑布流重排”(Masonry / Grid Shuffle)效果，也叫可筛选网格动画(filterable grid animation)。
应用筛选时，不再匹配的卡片在原地缩小并淡出，剩下的卡片平滑地滑到新位置；清除筛选时反向播放。
网格高度变化时不要让周围页面跳动；筛选控件要用真正的按钮，并标明当前选中的是哪个筛选。

对话框在变暗的页面上方，从中心略微放大并淡入。

在[应用位置]添加“弹窗缩放淡入”(Modal Scale-Fade In)动画，也叫对话框打开动画(dialog open animation)或缩放淡入对话框(zoom-fade dialog)。
后方页面变暗的同时，对话框从中心略微放大并淡入：快速、含蓄，不要回弹。
每次打开对话框都播放一次，把焦点移入对话框并留在里面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，只用简单的淡入。

浮动菜单从触发按钮所在的位置一边放大一边淡入。

在[应用位置]添加“下拉菜单弹出”(Popover / Dropdown Open)动画，也叫 menu pop 或 dropdown scale-fade。
菜单从触发按钮旁的角落一边微微放大一边淡入，要快速、利落；关闭时淡出得稍快一些。
让菜单始终贴着触发按钮，按 Escape 或点击外部即可关闭，并在触发按钮上向屏幕阅读器标明展开状态。

元素仿佛移动并缩放到新位置上对应的元素，看起来是同一个对象。

在[应用位置]添加“共享布局动画”(Shared Layout Animation)，也叫页面内共享元素(in-page shared element)。
选中项变化时，元素要从旧位置平滑地移动并缩放到新位置，轻柔地落定，让人看出这是同一个对象而不是两个。
任何时刻只显示一份，移动过程中不要让周围布局跳动。

下划线或胶囊形背景从旧标签滑动到新选中的标签。

在[应用位置]添加“标签指示条滑动”(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
选中新标签时，下划线从旧标签滑到新标签，快速并平滑减速；如果两个标签宽度不同，就顺势伸缩到新标签的宽度。
保持正确的标签页语义并支持方向键切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，指示条直接移过去，不做滑动。

简短消息从屏幕边缘滑入或淡入，停留片刻后离开；堆叠的提示会移动让出位置。

在[应用位置]添加“消息提示滑入”(Toast Slide-In)，也叫 snackbar 或 toast notification。
每条消息从屏幕边缘向上滑入并淡入，平滑减速；有新提示出现时，已显示的提示要平滑移动让出位置。
在不抢走焦点的前提下把消息播报给屏幕阅读器，显示时间要足够阅读，鼠标悬停或获得焦点时暂停自动关闭。

悬停片刻后，一个小标签在元素旁一边轻移到位一边淡入。

在[应用位置]添加“文字提示淡入”(Tooltip Fade)，也叫 tooltip reveal。
鼠标悬停片刻后，标签在元素旁一边轻移到位一边淡入；指针离开时立即快速消失，不要延迟。
键盘聚焦时也要显示，按 Escape 可关闭，并把它与元素关联起来，让屏幕阅读器能读出。

新视图在一个从点击位置向外扩展的圆形中显现。

在[应用位置]添加“圆形显现”(Circular Reveal)过渡，也叫 clip-path circle expand 或 theme toggle reveal。
新视图在一个从被按下的控件处向外扩展的圆形中出现，直到覆盖整个区域：平滑、匀稳，起止都要缓和。
圆形要正好从按下控件的位置开始；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则不用圆形，直接切换。

旧页面淡出的同时，新页面在同一区域淡入。

在[应用位置]添加“页面交叉淡化”(Crossfade Page Transition)，也叫 cross-dissolve 或 fade transition。
导航时，旧页面淡出，新页面同时在同一区域淡入：柔和，而且相当快。
让两个页面保持在同一位置，淡化过程中不能有任何位移；切换后把焦点移到新页面的主标题上。

实色面板扫过屏幕遮住旧页面，随后收回，露出新页面。

在[应用位置]添加“幕布擦除”(Curtain / Panel Wipe)页面过渡，也叫 page wipe 或 staggered panels。
实色面板依次扫入，遮住旧页面；页面在完全被遮住时切换，然后面板继续移出视野，露出新页面：大胆而流畅。
面板遮住旧页面之前绝不能露出新页面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。

旧内容先完全淡出，新内容再带着轻微缩放淡入。

在[应用位置]添加“淡出淡入”(Fade Through)页面过渡，也叫 fade-through transition 或 out-in route transition。
旧内容先快速、完全地淡出，然后新内容一边微微放大到位一边淡入。
两者绝不能重叠，新内容放大时布局也不能发生位移。

带有 Logo 或计数器的全屏开场层滑走或淡出，露出网站。

在[应用位置]添加“开屏加载揭幕”(Preloader Curtain Lift)，也叫 splash screen 或 intro loader。
全屏开场层在加载条填满期间保持不动，然后平滑地向上滑走，露出下方轻柔落定的网站。
只在首次加载时播放，停留时间绝不能超过实际加载所需；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接跳过。

旧内容和新内容沿 X、Y 或 Z 轴一起移动并伴随淡入淡出，以表现空间关系。

在[应用位置]添加“共享轴”(Shared Axis)页面过渡，也叫 shared axis X/Y/Z。
前进时，旧内容向一侧滑动一小段并快速淡出，新内容从另一侧滑入并紧随其后淡入；后退时方向相反。
位移要短，只需暗示方向；轴向要与导航对应：同级用横向，分步用纵向，逐层深入用纵深方向。

对应的元素（例如缩略图）在页面之间变换位置和大小。

在[应用位置]添加“共享元素过渡”(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
进入下一页时，对应的元素（例如缩略图）平滑地移动并放大到新页面上的位置，其余内容交叉淡化；返回时再缩回去。
给两个页面上对应的元素同一个共享标识，确保正确配对；浏览器无法变换时，退回为简单的交叉淡化。

新页面从一侧滑入，旧页面同时滑出，方向跟随导航层级。

在[应用位置]添加“页面滑动过渡”(Slide Page Transition)，也叫 push / pop 或 directional slide。
前进时，新页面从侧边推入，旧页面从另一侧滑出；后退时两者反向移动：平滑，起止都要缓和。
方向要与导航层级对应，包括浏览器的返回按钮；滑动过程中页面不能出现横向滚动。

旧页面放大或缩小并淡出，新页面同时缩放到位。

在[应用位置]添加“页面缩放过渡”(Zoom Page Transition)，也叫 scale transition 或 zoom in / out。
深入时，旧页面微微放大并淡出，新页面从稍小的尺寸放大到位；返回时反向缩小：平滑、迅速。
缩放幅度要含蓄，保证内容全程可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。

几根竖条错开节奏地伸缩，像音频均衡器一样。

在[应用位置]添加“均衡器加载”(Bar Loader (Equalizer))动画，也叫 bars loader 或 audio bars。
几根竖条像音频均衡器一样彼此错开节奏地伸缩，节奏轻快但均匀。
循环要无缝衔接，为屏幕阅读器加上状态标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。

先用一张极小的模糊版图片占位，完整图片加载后逐渐变清晰。

在[应用位置]添加“模糊占位图”(Blur-Up Placeholder)图片加载效果，也叫 LQIP 或 blur placeholder。
先立即用一张极小、高度模糊的图片填满图片位置，完整图片加载完成后，平滑且较快地变清晰。
预先留出图片的准确尺寸，图片加载时不能引起任何位移；并裁掉模糊的边缘，不要溢出边框。

一排圆点依次跳动、淡入淡出或缩放。

在[应用位置]添加“跳动圆点”(Bouncing Dots)，也叫 dots loader 或 three-dot loader。
圆点以轻快、有弹性的节奏依次跳起再落下，一轮结束后短暂停顿，再重新开始。
循环要无缝衔接，并为屏幕阅读器提供状态标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。

操作执行期间，按钮把文字换成一个小加载图标，或在旁边加上它。

在[应用位置]添加“按钮加载状态”(Button Loading State)，也叫 spinner button 或 loading button。
按下时按钮轻轻下压，文字淡出，操作进行期间在原位置显示一个小加载图标，完成后文字再回来。
加载时保持按钮宽度不变，阻止重复点击，并向屏幕阅读器播报忙碌状态。

圆环或圆弧持续旋转，表示正在加载。

在[应用位置]添加“环形加载”(Circular Spinner)，也叫 spinner 或 throbber。
一段圆弧沿着浅色圆环匀速旋转，同时不断伸长又缩短，流畅而连续。
旋转要无缝衔接，并为屏幕阅读器提供加载标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则放慢或停止旋转。

进度条按任务完成比例从左向右填充。

在[应用位置]添加“确定进度条”(Determinate Progress Bar)，也叫 progress bar fill 或 progress indicator。
进度条随真实进度从左向右填充，每次更新之间平滑过渡，并在旁边显示百分比。
使用带当前值、最小值和最大值的正确进度条语义，让屏幕阅读器能读出进度，并且填充绝不能倒退。

时长未知时，一段进度条沿轨道反复滑过。

在[应用位置]添加“不确定进度条”(Indeterminate Linear Progress)，也叫 indeterminate progress bar。
在任务时长未知期间，一小段进度条沿着轨道从一端滑到另一端，反复进行，快速而流畅。
让这一段完整地滑入并滑出轨道，使循环看不出衔接处，并为屏幕阅读器将其标记为忙碌中的进度条。

长任务推进时，步骤列表逐项高亮或打勾。

在[应用位置]添加“多步骤加载”(Multi-Step Loader)，也叫 step loader 或 checklist loader。
步骤从上到下逐个亮起，每完成一步就弹出一个小对勾，节奏平稳、便于阅读。
根据任务的真实进度推进步骤，而不是用固定计时器，并向屏幕阅读器播报每个已完成的步骤。

圆弧沿圆环延伸，显示完成的百分比。

在[应用位置]添加“环形进度”(Progress Ring)，也叫 circular progress 或 radial progress。
圆弧从顶部开始沿圆环顺时针延伸，显示完成的百分比，停下时缓缓减速，同时中间的数字跟着递增。
让圆弧和数字保持同步，并用正确的进度条语义向屏幕阅读器提供数值。

灰色占位块柔和地明暗变化，提示内容正在加载。

在[应用位置]添加“脉冲占位”(Pulse Placeholder)，也叫 skeleton pulse。
与即将出现的内容形状一致的灰色占位块一起缓慢变亮再恢复，节奏柔和、平稳。
占位块要与真实布局一致，内容加载进来时不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。

一道亮光扫过灰色占位图形。

在[应用位置]添加“骨架屏流光”(Skeleton Shimmer)，也叫 skeleton wave 或 shimmer effect。
一道柔和的光带从左到右扫过灰色占位图形，下一次扫过前短暂停顿：流畅、不慌不忙。
占位图形要与真实布局一致，内容加载时不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则显示静态占位。

页面顶部的细条在跳转过程中缓慢前进，加载完成时走完全程。

在[应用位置]添加“顶部加载条”(Top Loading Bar)，也叫 page progress bar。
页面加载时，顶部边缘的细条先快速前冲，然后越走越慢；加载完成后迅速冲到尽头并淡出。
在加载真正完成之前绝不能走到尽头，也不要遮挡或挤动页面内容。

气泡中的三个圆点轮流跳动或上浮，表示对方或 AI 正在输入。

在[应用位置]添加“正在输入提示”(Typing Indicator)，也叫 typing dots。
对方输入时，小聊天气泡里的圆点依次上浮并变亮，节奏柔和、轻缓。
循环要无缝衔接，消息一到就立刻移除气泡，并为屏幕阅读器提供一段简短的状态文字来代替圆点。

一道发光脉冲沿着连接两个元素的线条移动。

在[应用位置]添加“动态光束”(Animated Beam)效果，也叫 connecting beam。
一道短促的发光脉冲沿着连接两个元素的线条从一端匀速移动到另一端，然后重新开始：流畅、平静。
连接线本身要始终可见；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则让脉冲保持静止。

渐变背景中的颜色缓慢变化、平移或旋转。

在[应用位置]添加“动态渐变”(Animated Gradient)背景，也叫 gradient animation 或 moving gradient。
渐变的颜色在区域内缓慢平移，柔和、连续地流动，循环重新开始时不能出现可见的跳动。
上方的文字在每种颜色上都要清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止移动。

由线条或方块组成的网格，其中的格子淡入淡出或闪烁。

在[应用位置]添加“动态网格”(Animated Grid Pattern)背景，也叫 flickering grid 或 grid background。
浅色的网格线保持不动，零星几个格子在不同时间缓慢淡入淡出：安静、含蓄，绝不同时亮起。
让它待在内容后面，不拦截点击；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止闪烁。

柔和模糊的色带像极光一样在内容后方飘动。

在[应用位置]添加“极光背景”(Aurora Background)，也叫 northern lights gradient。
柔和、模糊的色带在内容后方缓慢飘动摇曳，彼此重叠交融，就像北极光：非常缓慢、如梦似幻。
上方文字要保持清晰可读，不要每一帧都重新对色带做模糊，以保持流畅；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止飘动。

细细的发光线条沿路径移动，有时撞到表面会迸散开来。

在[应用位置]添加“背景光束”(Background Beams)效果，也叫 light beams 或 background lines。
背景中铺着几条浅色曲线路径，短短的发光条一条接一条地沿路径移动，节奏平稳、匀速。
光束要错开时间，绝不同步移动，并放在内容后面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止光束。

倾斜的方块网格在指针经过时亮起颜色。

在[应用位置]添加“背景方块”(Background Boxes)效果，也叫 tile hover background。
用倾斜的方块网格铺满区域；指针经过的方块要立即亮起，再慢慢暗回去，留下一条短短的拖尾。
方块要放在内容后面，不能挡住对内容的点击；在触屏设备上改为点亮被点按的方块。

一道明亮的高光沿着卡片边框环绕移动。

在[应用位置]添加“边框光束”(Border Beam)效果，也叫 shine border 或 moving border。
一道短而亮的高光沿卡片边框以均匀、从容的速度环绕移动，循环时不能出现明显跳动。
效果不能改变卡片的内容和尺寸；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止光束。

点阵以波浪的方式脉动或发光。

在[应用位置]添加“点阵发光”(Dot Pattern Glow)背景，也叫 dotted glow background 或 dot grid。
细密的点阵保持静止，一道柔和的光带缓缓扫过，点亮经过的圆点：平静而含蓄。
圆点要足够淡，保证上层内容清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止发光。

一条发光的灯线向两侧展开，向下方的标题投下一道锥形光。

在[应用位置]添加“灯光效果”(Lamp Effect)，也叫 lamp glow。
区块进入视口时，一条细细的发光线从中间向两侧展开，向下方的标题投下一道柔和的锥形光，标题同时上浮淡入到位：缓慢而流畅。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示被照亮的标题。

柔和的光束在背景上轻轻摇曳。

在[应用位置]添加“体积光”(Light Rays)背景，也叫 god rays 或 light shafts。
几道柔和的半透明光束从顶部呈扇形散开，左右轻轻摇曳，同时略微变亮变暗：缓慢而富有氛围。
光束要放在内容后面，并且足够淡，不影响阅读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止光束。

多个颜色点平滑地交融、漂移，形成有机的多色背景。

在[应用位置]添加“网格渐变”(Mesh Gradient)背景，也叫 animated mesh gradient。
几团柔和的色块彼此交融，在区域内缓慢漂移，让背景以有机的方式不断变化：非常缓慢、流畅。
无论颜色如何交融，都要保证上层内容清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止漂移。

带着发光尾迹的斜线划过卡片或区块。

在[应用位置]添加“流星”(Meteors)效果，也叫流星雨(meteor shower)或 shooting stars。
几道带着渐隐尾迹的小斜线在随机时刻斜着划过区域，每一道都一闪而过。
数量要少，保持点缀的作用，并在区域边缘裁切；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止流星。

细密的颗粒纹理覆盖在页面上，有时像胶片颗粒一样闪动。

在[应用位置]添加“噪点颗粒”(Noise / Grain Texture)叠加层，也叫胶片颗粒(film grain)或 noise background。
一层细密、浅淡的颗粒纹理覆盖在表面上，像胶片颗粒一样小幅跳动闪烁：要含蓄，绝不能强到让内容显得浑浊。
点击要能穿透叠加层；纹理只生成一次，不要每帧生成；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。

大量小圆点在背景中漂浮、相互连接或对指针作出反应。

在[应用位置]添加“粒子”(Particles)背景，也叫 floating particles 或 particle field。
大小不一的小圆点各按自己的节奏，沿着柔和、随意游走的路径缓慢漂浮：平静而轻盈。
圆点数量要适中，在性能较弱的设备上也保持轻快；离开屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。