svg实现we动画

最新推荐文章于 2021-06-10 11:05:34 发布

loyal98

最新推荐文章于 2021-06-10 11:05:34 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/qq_39048609/article/details/77872970

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>svg</title>
	<style>
		#one {
			fill:none;
			stroke:#F82020;
			stroke-width:20;
  			animation: one 6s infinite;
		}
		@keyframes one {
			from{
				stroke-dasharray: 0,300;
				}to{
				stroke-dasharray: 4000;
				}
		}
	</style>
</head>
<body>
	<svg style="width: 100%; height: 800px" xmlns="http://www.w3.org/2000/svg">
		<!-- 椭圆 -->
		<!-- <ellipse cx="300" cy="75" rx="200" ry="70" style="fill:#bbb; stroke:#000;stroke-width:2"/> -->
		<!-- 线条 x1y1为起点，x2y2为终点 -->
		<!-- <line x1="20" x2="300" y1="40" y2="400" style="stroke: #aa0; stroke-width:2" /> -->
		<!-- <line x1="300" x2="20" y1="400" y2="800" style="stroke: #0aa; stroke-width:2" /> -->
		<!-- 多边形 x轴，y轴的值 第二个x轴，y轴的值 -->
		<!-- <polygon points="550,300 750,350 800,500 650,400 550,500" style="fill: pink; stroke:#FFD17A; stroke-width:2;" /> -->
		<!-- <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/> -->
		<!-- 折线 -->
		<!-- <polyline points="1000,0 1200,600 700,250 1250,250 800,600 1000,0" style="stroke:#EB7605; stroke-width:2; fill:white" /> -->
		<!-- <line id="one" x1="100" y1="200" x2="250" y2="500"/>
		<line id="two" x1="245" y1="500" x2="500" y2="100"/>610,380 850,380 610,380 550,500 750,500 -->
		<polyline id="one" points="180,200 310,500 440,120 550,500 700,200 900,200 700,200 630,340 840,340 630,340 557,483 760,483" />
	</svg>
</body>
</html>