径向擦拭纯CSS；如果不是 SVG 替代品

Question

我发现 this question 已得到解答，似乎可以使用 SVG 实现径向擦除动画。

我希望实现如下示例所示的 border: 1px solid green; 效果：

不过，我想知道的是，纯 CSS 是否可以做到这一点——那将是理想的。

如果 CSS 无法实现，我将如何使用 SVG 解决此类问题？

Answer 1

CSS 不是制作此类动画的正确工具。虽然您可以使用 CSS 来做到这一点，但最好还是使用 SVG。对于纯 CSS 版本，您可以尝试调整中提供的片段，但我不会真的推荐它，因为如您所见，它非常复杂。

您所要做的就是使用 circle 元素，将其 stroke-dasharray 设置为等于圆的周长，然后像下面的代码片段一样为 stroke-dashoffset 设置动画。

stroke-dasharray 属性为圆圈（边框）创建虚线描边，其中每个描边和它们之间的破折号都将具有为 [=51= 指定的长度].

stroke-dashoffset 属性指定圆的描边应该开始的偏移量。当偏移量为 0 时，绿色笔划可见，而当偏移量为 314（等于圆周）时，笔划之间的虚线变得可见。因此它最终会产生擦除效果。

svg {
  height: 100px;
  width: 100px;
  transform: rotate(-90deg);
}
circle {
  stroke: green;
  fill: none;
  stroke-dasharray: 314; /* equal to circumference of circle 2 * 3.14 * 50 */
  animation: wipe 2s linear infinite;
}
@keyframes wipe {
  0% {
    stroke-dashoffset: 0;
  }
  30%, 50% {
    stroke-dashoffset: 314;
  }
  80%, 100% {
    stroke-dashoffset: 0;
  }  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg viewBox='0 0 100 100'>
  <circle cx='50' cy='50' r='40' />
</svg>

以上示例使用了无限动画，因此擦除和重绘将运行连续进行。如果必须切换 on/off 那么最好使用 transition 就像下面的代码片段一样。我在 :hover 上完成了此操作，但您可以轻松地将其调整为点击或其他事件。

svg {
  height: 100px;
  width: 100px;
  transform: rotate(-90deg);
}
circle {
  stroke: green;
  fill: none;
  stroke-dasharray: 314; /* equal to circumference of circle 2 * 3.14 * 50 */
  stroke-dashoffset: 0; /* initial setting */
  transition: all 2s;
}
svg:hover circle{
  stroke-dashoffset: 314;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg viewBox='0 0 100 100'>
  <circle cx='50' cy='50' r='40' />
</svg>

径向擦拭纯CSS；如果不是 SVG 替代品

Radial wipe with pure CSS; if not SVG alternative

html

css

svg

css-transitions

css-animations