废话不多少 上图上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
body {
margin: unset;
display: grid;
place-content: center;
height: 100vh;
background-color: #282c34;
}
</style>
<svg width="1900" height="200">
<defs>
<g id="box">
<polyline points="0 57 713 57 720 63 1200 63 1210 57 1920 57" fill="transparent"
id="boxPath" stroke-width="1" />
</g>
<radialGradient id="radialGradient" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
</radialGradient>
<mask id="mask">
<circle cx="0" cy="0" r="100" fill="url(#radialGradient)">
<animateMotion dur="4s" repeatCount="indefinite" from="0,57" to="1920,57">
<mpath xlink:href="#boxPath"></mpath>
</animateMotion>
</circle>
</mask>
</defs>
<use stroke="#235fa7" stroke-width="4" xlink:href="#box"></use>
<use stroke="#4fd2dd" stroke-linecap="round" stroke-width="2" xlink:href="#box" mask="url(#mask)">
<animate attributeName="stroke-dasharray" from="0,0" to="1920,0" dur="4s" repeatCount="indefinite">
</animate>
</use>
</svg>
</body>
</html>
一个名为
box的<g>组，其中包含一条透明填充的折线<polyline>，定义了一条路径。一个径向渐变
<radialGradient>，从白色不透明到完全透明。一个名为
mask的遮罩层，包含一个圆形，其填充为上述定义的径向渐变，并且该圆在定义的路径上无限循环移动。SVG容器尺寸为宽1900px，高200px。
<defs>内定义了多个SVG组件供后续使用：使用
<use>标签引用之前定义的box组两次，一次用于绘制蓝色的静态线条，另一次用于创建带有遮罩效果的动态线条动画。动画效果：
第二个
<use>元素中的<animate>标签负责实现线条的动态显示效果，通过改变stroke-dasharray属性值来模拟线条逐渐显现的过程，持续时间为4秒，并且无限重复。
