本文详解如何利用 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><stop offset="50%" stop-color="#8b9643"></stop><stop offset="90%" stop-color="#000000"></stop></lineargradient><lineargradient id="Gradient2" gradienttransform="rotate(90)"><stop offset="10%" stop-color="#000000"></stop><stop offset="50%" stop-color="#dda885"></stop><stop offset="90%" stop-color="#000000"></stop></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)"></circle></mask></defs><!-- 被遮罩的内容：左右分块填充 --><g mask="url(#m1)"><rect width="300" height="600" fill="url(#Gradient1)"></rect><rect x="300" width="300" height="600" fill="url(#Gradient2)"></rect></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 动画的高性价比实践范式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
