参考效果： segmentfault.com/a/119000003…
因为这篇文章里既有css，还有svg,我嫌烦就尝试写了个svg版，代码如下(当前这个是react版，其他版本自行修改部分标签)：
<svg width={500} height={500}>
<defs>
<radialGradient id="grad1" cx='50%' cy='50%' r='50%' fx='50%' fy='50%' >
<stop offset='0%' style={{ stopColor: "rgba(2,246,255,.5)" }}></stop>
<stop offset='100%' style={{ stopColor: "rgba(2,246,255,0)" }}></stop>
</radialGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style={{ stopColor: "rgba(2,246,255,0)" }} />
<stop offset="100%" style={{ stopColor: "rgba(2,246,255,0.5)" }} />
</linearGradient>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: "rgba(2,246,255,0)" }} />
<stop offset="100%" style={{ stopColor: "rgba(2,246,255,0.5)" }} />
</linearGradient>
</defs>
<path d="M50 30 L50 100 L350 100" stroke="rgba(29,159,167,0.4)" fill="transparent" strokeWidth={5}></path>
<g>
<circle cx='50' cy='30' r='15' fill='url(#grad1)' ></circle>
<circle cx='50' cy='30' r='5' fill='rgba(2,246,255,1)' ></circle>
<circle cx='350' cy='100' r='15' fill='url(#grad1)' ></circle>
<circle cx='350' cy='100' r='5' fill='rgba(2,246,255,1)' ></circle>
</g>
<g>
<rect x="47.5" y="30" width="5" height="20" style={{ fill: 'url(#grad2)', strokeWidth: 0 }} >
<animateMotion path="M0 0 L0 50" begin="0s" dur="1s" repeatCount="indefinite" />
</rect>
</g>
<g>
<rect x="47.5" y="97.5" opacity='0' width="20" height="5" style={{ fill: 'url(#grad3)', strokeWidth: 0 }} >
<animate attributeName="opacity" from="0" to="1" begin="0s" fill="freeze" dur="1s" repeatCount="1" />
<animateMotion path="M0 0 L290 0" begin="1s" dur="3s" repeatCount="indefinite" />
</rect>
<rect x="47.5" y="97.5" opacity='0' width="20" height="5" style={{ fill: 'url(#grad3)', strokeWidth: 0 }} >
<animate attributeName="opacity" from="0" to="1" begin="2s" fill="freeze" dur="1s" repeatCount="1" />
<animateMotion path="M0 0 L290 0" begin="2s" dur="3s" repeatCount="indefinite" />
</rect>
<rect x="47.5" y="97.5" opacity='0' width="20" height="5" style={{ fill: 'url(#grad3)', strokeWidth: 0 }} >
<animate attributeName="opacity" from="0" to="1" begin="3s" fill="freeze" dur="1s" repeatCount="1" />
<animateMotion path="M0 0 L290 0" begin="3s" dur="3s" repeatCount="indefinite" />
</rect>
</g>
</svg>
记得是黑色背景，要不然效果查一些
