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

我有兴趣在CSS中创建一个加载微调器,但为了做到这一点,我需要能够像这样绘制一个开环形状：

环会围绕圆周绘制自己.这在CSS中是否可以实现？

解决方法

要创建逐渐绘制其外部路径的圆,请使用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>