Radial wash with pure CSS; if not svg alternative

Question

I found this question that was answered, and it looks like he got the radial erase animation using SVG.

I am looking to achieve the effect border: 1px solid green;, as in the following example:

What I would like to know is that it is possible with pure CSS - that would be ideal.

If this is not achievable with CSS, how would I deal with this type of thing with SVG?

Answer 1

CSS . CSS, SVG. CSS , , , , , .

, , 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>

Hide result

---

, . /, 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>

Hide result