svg 线条流动的光效

最新推荐文章于 2025-05-17 14:14:13 发布

城永

最新推荐文章于 2025-05-17 14:14:13 发布

阅读量758

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/weixin_47133092/article/details/137041724

这篇文章介绍了如何使用SVG和CSS动画创建一个动态的虚线路径，展示了一种在网页设计中利用SVG技术实现视觉效果的方法。

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

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