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

最新推荐文章于 2024-10-25 21:30:00 发布

前行的枫_denglinbo

最新推荐文章于 2024-10-25 21:30:00 发布

阅读量634

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44708870/article/details/88680827

博客介绍了在SVG中利用stroke-dasharray和stroke-dashoffset属性实现小动效。这些属性在前端开发的图形展示中能发挥作用，可创造出独特的视觉效果，为网页增添动态元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>