Ripple (水波纹)

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

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

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

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

同心圆从中心点向外扩散并逐渐淡出。

在[应用位置]添加“同心波纹”(Ripple Rings)效果，也叫 background ripple 或 concentric ripples。
圆环从中心点不断向外扩散，越大越淡，一个接一个、间距均匀：缓慢而稳定。
中心元素保持静止、位置不变；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止波纹。

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

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

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

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

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

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

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

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