本文详解如何利用 SVG stroke-dasharray + stroke-dashoffset 配合 CSS 动画，实现左右对称、自顶向下渐显的环形（donut）加载效果，无需 JavaScript，纯 CSS 驱动，兼容性好且性能优异。
本文详解如何利用 svg `stroke-dasharray` + `stroke-dashoffset` 配合 css 动画，实现左右对称、自顶向下渐显的环形（donut）加载效果，无需 javascript，纯 css 驱动，兼容性好且性能优异。
要实现一个左右对称、自顶向下逐步显现的甜甜圈动画（即环形路径从顶部中点开始，向左右两侧同步延伸，最终闭合成完整圆环），核心思路是：用一个圆形描边（
与直接动画
✅ 推荐实现（精简可靠版）
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" height="95vh">
<defs>
<!-- 左右双色渐变 -->
<linearGradient id="Gradient1" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="#000000"/>
<stop offset="50%" stop-color="#8b9643"/>
<stop offset="90%" stop-color="#000000"/>
</linearGradient>
<linearGradient id="Gradient2" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="#000000"/>
<stop offset="50%" stop-color="#dda885"/>
<stop offset="90%" stop-color="#000000"/>
</linearGradient>
<!-- 关键：遮罩用的圆形路径（已旋转90°使起始点位于顶部） -->
<mask id="m1">
<circle id="c1"
cx="300" cy="300" r="250"
stroke="white" fill="none"
stroke-width="100"
pathLength="100"
stroke-dasharray="0 100"
stroke-dashoffset="-50"
transform="rotate(90 300 300)" />
</mask>
</defs>
<!-- 被遮罩的内容：左右分块填充 -->
<g mask="url(#m1)">
<rect width="300" height="600" fill="url(#Gradient1)" />
<rect x="300" width="300" height="600" fill="url(#Gradient2)" />
</g>
</svg>#c1 {
animation: unfold linear forwards 3s;
}
@keyframes unfold {
from {
stroke-dasharray: 0 100;
stroke-dashoffset: -50; /* 起始：空白段覆盖全部，仅留顶部中心1px缺口 */
}
to {
stroke-dasharray: 100 100;
stroke-dashoffset: 0; /* 结束：完整实线，完全显示内容 */
}
}? 原理说明
- pathLength="100" 将圆周标准化为 100 单位，便于百分比控制；
- transform="rotate(90 300 300)" 将圆的默认起点（3点钟方向）旋转至 12点钟方向（顶部中心），这是实现“自顶向下”动画的前提；
- stroke-dashoffset: -50 使初始空白段（0 100）的“起点”偏移到圆心正上方，确保动画从顶部对称展开；
- stroke-dasharray: 0 100 → 100 100 表示：从“无可见描边”过渡到“全实线描边”，配合遮罩，等效于“遮罩孔洞从无到满”。
⚠️ 注意事项
- 避免使用 shape-rendering="crispEdges"：它会破坏抗锯齿，在动画中易产生闪烁或锯齿，建议移除；
-
中 stroke="white" 是必须的 ：白色区域在遮罩中表示“可见”，黑色为“隐藏”； - 若需调整动画时长，只需修改 animation-duration（如 2s 或 4s），无需重算 dasharray 值；
- 此方案天然支持左右对称，因圆形遮罩本身具备旋转对称性，无需手动拆分左右路径。
✅ 进阶提示：添加内圆镂空（真·甜甜圈）
若需呈现中间透明的环形（即非实心圆盘），只需将
掌握这一模式，你不仅能实现 donut 加载动画，还可迁移至任意闭合路径的“书写式”揭示效果，是 SVG + CSS 动画的高性价比实践范式。
立即学习“前端免费学习笔记（深入）”；
