svg圆形描边特效

jianfly.com 2019-01-31 1548次浏览

<div class="ico">
      <div class="svg">
           <svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
                <circle class="dy" cx="75" cy="75" r="72" stroke="black" stroke-width="5" />
           </svg>
      </div>
</div>
.ico { width: 140px; height: 140px; border-radius: 50%; background: no-repeat center; border: 5px solid #e6e6e6; position: relative;
    .svg { width: 150px; height: 150px; position: absolute; left: -5px; top: -5px; border-radius: 50%; }
}
.dy { stroke:@color; fill:transparent; .transition(0.5s);stroke-dasharray:0 50;stroke-dashoffset:0; }
&:hover {
    .dy { stroke-dasharray:100 0; }
}