svg中stroke-dasharray、stroke-dashoffset实现小动效

<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>
发布了14 篇原创文章 · 获赞 10 · 访问量 1416

猜你喜欢

转载自blog.csdn.net/weixin_44708870/article/details/88680827