svg实现we动画

来源：互联网发布：电脑屏幕色温调节软件编辑：程序博客网时间：2024/04/29 02:01
<!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>
阅读全文
0 0