<style>
svg{
width: 1200px;/*这个样式可删除*/
}
polyline {
animation: dash 5000s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: -600000;
}
}
/*
*stroke-dasharray="80,20" 虚线分段,有才能看到流动的效果
*/
</style>
<div id="container">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 310.7 324.7" enable-background="new 0 0 310.7 324.7" xml:space="preserve">
<polyline fill="#FFFFFF" stroke="#000000" stroke-dasharray="80,20" stroke-width="18" stroke-miterlimit="10" points="73.2,120 73.2,246 223.2,246 223.2,62 30.2,62 30.2,296 277.2,296 277.2,26 " />
</svg>
</div>
svg 线条流动的光效
最新推荐文章于 2024-06-05 10:26:53 发布