是否可以在CSS(开环形状)中绘制局部圆形轮廓? [英] Is it possible to draw a partial circle outline in CSS (open ring shape)?

问题描述

我有兴趣完全使用CSS创建一个加载微调器，但要这样做，我需要能够绘制一个像这样的开环形状:

I'm interested in creating a loading spinner entirely in CSS but in order to do so I would need to be able to draw a open ring shape like this:

圆环会在圆的圆周周围绘制自身.在CSS中可以实现吗?

The ring would draw itself around the circumference of the circle. Is this achievable in CSS?

推荐答案

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

To create a circle that gradually draws it's outer path, use SVG.

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

SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself.

然后使用CSS动画逐渐更改stroke-dashoffset，以将破折号绕圆的周长移动.

Then use a CSS animation to gradually change the stroke-dashoffset to move the dash around the perimeter of your circle.

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>

这篇关于是否可以在CSS(开环形状)中绘制局部圆形轮廓?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！