SVG矩形描边特效
jianfly.com 2019-01-31 1881次浏览
<div class="img"> <img src="__TMPL__/Public/Image/tp1.jpg" width="170" height="90" alt=""> <div class="svg"> <svg height="90" width="170" xmlns="http://www.w3.org/2000/svg"> <rect class="rect" width="170" height="90" /> </svg> </div> </div>
a { display: block; .img { width: 170px; height: 90px; position: relative; img { display: block; .transition(); } .svg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; .rect { stroke:@color; fill:transparent; .transition(0.5s); stroke-width: 5px; stroke-dasharray:0 50; stroke-dashoffset:0; } } } small { display: block; text-align: center; font-size: 16px; color: #222; line-height: 40px; .transition(); } &:hover { .img{ img { .transform(0.97); } .svg .rect { stroke-dasharray:100 0; } } } }