Clip-path实现顺时针绘制圆形动画的方法

数据老陈

2026-6-23

解决圆形顺时针逐步绘制的动画问题

问题原因

你当前的clip-path方案在25%之后出现跳变，核心原因是CSS无法在顶点数量不同的polygon之间平滑插值：每个关键帧的多边形顶点数依次增加（0%是3个点，25%是4个，50%是5个……），动画到关键帧时只能直接切换形状，无法实现逐步过渡。

推荐解决方案

下面提供两种可靠的实现方式：

方案1：SVG环形绘制（最适合纯环形动画）

利用SVG的stroke-dasharray和stroke-dashoffset属性，通过控制虚线偏移量实现平滑绘制：

<!-- 可选：外层环形边框 -->
<svg width="300" height="300" viewBox="0 0 300 300">
  <circle cx="150" cy="150" r="130" fill="none" stroke="#eee" stroke-width="20" />
  <!-- 要绘制的目标环形 -->
  <circle id="paint-ring" cx="150" cy="150" r="130" fill="none" stroke="#2196F3" stroke-width="20"
          stroke-dasharray="816.81" stroke-dashoffset="816.81" />
</svg>

@keyframes paintRing {
  to {
    stroke-dashoffset: 0;
  }
}

#paint-ring {
  animation: paintRing 3s ease-in-out forwards;
}

说明：

stroke-dasharray和stroke-dashoffset的值为圆的周长（公式：2 * π * r，这里r=130，周长≈816.81）
初始状态下偏移量等于周长，环形完全隐藏；动画结束时偏移量为0，环形完全显示

方案2：CSS锥形渐变+遮罩（适合带背景的环形）

用conic-gradient结合mask模拟环形绘制，无需依赖SVG：

.gwd-image-1ez7 {
  position: absolute;
  width: 300px;
  height: 300px;
  top: -25px;
  left: 735px;
  border-radius: 50%;
  /* 锥形渐变：从0度开始逐步填充环形 */
  background: conic-gradient(#2196F3 0deg, transparent 0deg);
  /* 遮罩：中间透明，只保留外层环形区域 */
  mask: radial-gradient(circle, transparent 70%, black 70%);
  animation: paintRing 3s ease-in-out forwards;
}

@keyframes paintRing {
  to {
    background: conic-gradient(#2196F3 360deg, transparent 360deg);
  }
}

说明：