使用纯CSS进行径向擦拭;如果不是SVG替代品

Question

我发现this question已经得到了答案，似乎可以通过SVG实现径向擦除动画。

我希望获得border: 1px solid green;效果，如下例所示：

我想知道的是，如果纯CSS可以实现这一点，那将是理想的。

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

Answer 1

CSS不适合像这样的动画。虽然您可以使用CSS，但最好是使用SVG。对于纯CSS版本，您可以尝试调整my answer here中提供的代码段，但我不会真的推荐它，因为您可以看到它非常复杂。

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

stroke-dasharray属性为cirlce（边框）创建一个虚线笔划，其中每个笔划和它们之间的短划线将具有为属性指定的长度。

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>

以上示例使用无限动画，因此擦除和重绘将持续运行。如果必须打开/关闭它，那么最好在下面的代码段中使用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>