<style> div{ width: 420px; height: 200px; background: url('./img/timg.jpg') no-repeat; } polyline{ stroke: #3366cc; /* 线段颜色 */ stroke-width: 4; /* 线段宽度 */ fill: none; /* 描绘不填充 */ stroke-dasharray: 1160px; /* 线段总长度 */ stroke-dashoffset: 1160px; /* 线段未绘制的长度 */ transition: .8s; } div:hover polyline{ stroke-dashoffset: 0px; } </style> </head> <body> <div class="svgTest"> <svg width="420" height="200"> <polyline points="10,10 410,10 410,190 10,190 10,10"></polyline> <!-- 绘制路径的四个点 --> </svg> </div>
CSS笔记 - SVG Polyline 图片绘制动画边框
猜你喜欢
转载自www.cnblogs.com/carpenterzoe/p/10328257.html
今日推荐
周排行