svg遮罩动画实现页面过渡效果，核心是用定义透明区域变化，通过css或smil控制圆形、矩形、路径等遮罩图形的缩放、位移或形状演变，营造“遮盖→露出”等视觉过渡，并需与dom更新节奏协同避免闪动。

SVG遮罩动画实现页面过渡效果，核心是用 <mask></mask> 定义透明区域变化，再通过 CSS 或 SMIL 控制遮罩图形（如圆形、矩形、路径）的缩放、位移或形状演变，从而营造“遮盖→露出”或“切入→展开”的视觉过渡。

用圆形遮罩做中心扩散过渡

适合模态框弹出、页面跳转等场景。原理是让一个初始为 0 半径的 <circle></circle> 在遮罩层中快速放大，覆盖全屏后再缩小或反向还原。

• 在 <defs></defs> 中定义遮罩：白色背景（可见）+ 黑色圆形（不可见），初始 r="0"
• 对 <circle></circle> 添加 animate，控制 r 从 0 → 超出视口对角线长度（如 2000），dur="0.6s"，fill="freeze"
• 被遮罩的页面内容需设 mask="url(#fade-mask)"，且自身 opacity 保持 1

用矩形遮罩做左右滑入/幕布拉开展示

模拟影院幕布拉开或侧边栏滑出效果。关键在控制矩形的 x 或 width 属性随时间变化。

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

• 遮罩内放一个 <rect></rect>，初始 x="-100%" width="100%" height="100%"（完全左偏移）
• 动画让 x 从 -100% 到 0，或 width 从 0 到 100%，配合 ease-in-out 更自然
• 若要做“双侧合拢关闭”，可用两个矩形分别从左右向中间移动，同时遮罩内容区域

用路径遮罩实现不规则形状过渡（如手绘感、水波纹）

比基础几何图形更具设计表现力，但需注意路径动画的兼容性与性能。

• 用 <path></path> 定义遮罩轮廓，起始为极小闭合路径（如单点），终点为覆盖全屏的 rect 路径数据
• 通过 <animate attributename="d" ...></animate> 过渡路径字符串，需确保起止 d 值节点数一致（可用工具预处理）
• 更稳妥的做法：用 CSS clip-path 配合 SVG <path></path> 的 getTotalLength() + stroke-dasharray 模拟描边展开，再反相为遮罩

和页面切换逻辑联动的关键细节

遮罩动画不是孤立动效，需与路由、DOM 更新节奏协同，避免闪动或错帧。

• 过渡开始前，新页面内容应已渲染但 visibility: hidden 或 opacity: 0，待遮罩收尾再设为可见
• 推荐用 CSS 动画 + animationend 事件触发 DOM 替换；若用 SMIL，监听 endEvent 更可靠
• 移动端注意开启 will-change: transform 或使用 transform 替代 left/top 位移，保障帧率