<style>
path{
fill:transparent;
stroke:blue;
stroke-width: 3px;
stroke-dasharray: 1300px;
stroke-dashoffset: 1300px;
animation: run 6s linear infinite;
}
@keyframes run{
0%{
stroke-dashoffset:1300px;
}
100%{
stroke-dashoffset: 0px;
}
}
</style>
<svg width="300" height="400" style="border:1px solid red;">
<path d="M 100 100 L 200 100 L 200 200 L 100 200 L 100 340 L 220 340
L 220 320 L 120 320 L 120 220 L 220 220 L 220 80 L 100 80 L 100 100"></path>
</svg>
svg中stroke-dasharray、stroke-dashoffset实现小动效
猜你喜欢
转载自blog.csdn.net/weixin_44708870/article/details/88680827
今日推荐
周排行