svg圆形描边特效
jianfly.com 2019-01-31 1913次浏览
<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; } }