Circular Reveal (圆形显现)
别称 Clip-path circle expand, Theme toggle reveal
新视图在一个从点击位置向外扩展的圆形中显现。
适用场景
深色/浅色主题切换、页面切换
变体
- expand from click
- expand from center
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“圆形显现”(Circular Reveal)过渡，也叫 clip-path circle expand 或 theme toggle reveal。
新视图在一个从被按下的控件处向外扩展的圆形中出现，直到覆盖整个区域：平滑、匀稳，起止都要缓和。
圆形要正好从按下控件的位置开始；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则不用圆形，直接切换。相似的动效
A
将鼠标悬停在上面
Radial Fill (径向填充)
别称 Circle expand
悬停时一个彩色圆形从中心扩大或向中心收缩，填满元素。
适用场景
按钮
在[应用位置]添加“径向填充”(Radial Fill)悬停效果，也叫 circle expand。
新颜色的圆形从中心顺滑地扩大直到填满元素，指针离开后再缩回中心，同时文字颜色随之切换，保持清晰可读。
圆形要裁切在元素形状之内，文字位于其上方；键盘聚焦时也显示同样的效果。点击试试
Ripple (水波纹)
别称 Material ripple, Touch ripple, Ripple Button, Ink ripple
圆形波纹从点击或轻触的确切位置扩散开并淡出。
适用场景
按钮、列表项
在[应用位置]添加“水波纹”(Ripple)效果，也叫 material ripple 或 ink ripple。
每次点击或轻触时，一圈柔和的圆形波纹从按下的确切位置向外扩散，直到覆盖整个元素，边扩散边淡出：快速、轻盈。
波纹要按元素的形状裁切，快速连续按下时每次都产生新的波纹，用键盘按下时从中心开始扩散。A
Clip Reveal (裁剪显现)
别称 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path 或遮罩从边缘或某一点展开，逐步露出图片或文字。
适用场景
图片和标题的显现
在[应用位置]添加“裁剪显现”(Clip Reveal)入场效果，也叫 mask reveal、wipe reveal 或 image reveal。
让裁剪边缘从左向右扫过，内容保持不动、逐步显露出来：流畅，开始和结束都要柔和。
从一开始就为元素预留空间，避免布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接完整显示。Page Transition 中的其他动效
A
B
点击试试
Crossfade Page Transition (页面交叉淡化)
别称 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
旧页面淡出的同时，新页面在同一区域淡入。
适用场景
默认的路由切换
在[应用位置]添加“页面交叉淡化”(Crossfade Page Transition)，也叫 cross-dissolve 或 fade transition。
导航时，旧页面淡出，新页面同时在同一区域淡入：柔和，而且相当快。
让两个页面保持在同一位置，淡化过程中不能有任何位移；切换后把焦点移到新页面的主标题上。A
B
点击试试
Curtain / Panel Wipe (幕布擦除)
别称 Page wipe, Curtain reveal, Stripe transition, Staggered panels
实色面板扫过屏幕遮住旧页面，随后收回，露出新页面。
适用场景
作品集和设计公司网站的页面跳转
在[应用位置]添加“幕布擦除”(Curtain / Panel Wipe)页面过渡，也叫 page wipe 或 staggered panels。
实色面板依次扫入，遮住旧页面；页面在完全被遮住时切换，然后面板继续移出视野，露出新页面：大胆而流畅。
面板遮住旧页面之前绝不能露出新页面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。A
B
点击试试
Fade Through (淡出淡入)
别称 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
旧内容先完全淡出，新内容再带着轻微缩放淡入。
适用场景
在互不相关的页面之间切换
在[应用位置]添加“淡出淡入”(Fade Through)页面过渡，也叫 fade-through transition 或 out-in route transition。
旧内容先快速、完全地淡出，然后新内容一边微微放大到位一边淡入。
两者绝不能重叠，新内容放大时布局也不能发生位移。