径向擦除与纯CSS；如果不是SVG替代

Question

我已经找到了this question，它得到了回答，并且似乎实现了一个带有SVG的径向擦除动画。

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

​

​

不过，我想知道的是，使用纯CSS -that是否能够做到这一点是理想的。

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

Answer 1

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

您所要做的就是使用一个circle元素，将其stroke-dasharray设置为圆周，然后在下面的片段中对stroke-dashoffset进行动画化。

stroke-dasharray属性为圆圈(边框)创建一个虚线笔划，其中的每一笔和它们之间的破折号将具有为该属性指定的长度。

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>

​