是否可以在 CSS 中绘制部分圆形轮廓（开环形状）？

Question

我对完全在 CSS 中创建加载微调器很感兴趣，但为了做到这一点，我需要能够像这样绘制一个开放的环形：

环会绕着圆的圆周画自己。这在 CSS 中可以实现吗？

原文由 colindunn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要创建一个逐渐绘制其外部路径的圆，请使用 SVG。

SVG 的 stroke-dasharray 属性会将任何路径变成虚线，您可以通过将虚线大小设置为几乎与路径本身一样长来利用它。

然后使用 CSS 动画逐渐更改 stroke-dashoffset 以围绕圆的周边移动破折号。

 circle {
  fill: white;
  stroke: black;
  stroke-width: 2;
  stroke-dasharray: 250;
  stroke-dashoffset: 1000;
  animation: rotate 5s linear infinite;
}

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

 <svg height="100" width="100">
  <circle cx="50" cy="50" r="40" />
</svg>

原文由 Dylan Stark 发布，翻译遵循 CC BY-SA 3.0 许可协议