标签：box 进度条 svg stroke line 150px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
svg {
border: 1px solid hotpink;
line {
stroke-dasharray: 150px;
stroke-dashoffset: 150px;
animation: line-move 2s ease infinite;
}
}
@keyframes line-move {
to {
stroke-dashoffset: -150px;
}
}
</style>
</head>
<body>
<svg width="500px" height="300px">
<line x1="50" y1="50" x2="200" y2="50" stroke="red" stroke-width="10" />
</svg>
</body>
</html>
标签：box,
进度条,
svg,
stroke,
line,
150px
From： https://www.cnblogs.com/chlai/p/18177843