效果图：
20200422.gif
知识点：
1. stroke-dasharray 用于创建虚线，之所以后面跟的是array的，是因为值其实是数组。请看下面解释
🎈参数为1个时（虚线长）,虚线长为 100px
stroke-dasharray: 100;
image.png
🎈参数为2个时（虚线长，间距）,虚线长为 100px , 间距为 20px
stroke-dasharray: 100 20;
image.png
🎈参数为3个时（虚线长，虚线长，虚线长）,虚线长为 100px , 虚线长为 20px, 虚线长为 5px
stroke-dasharray: 100 20 5;
image.png
2. stroke-dashoffset 这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
可通过 stroke-dashoffset 的正负决定偏移方向
stroke-dashoffset: 0;
stroke-dasharray: 100 1100;
stroke-dashoffset: 0;
image.png
stroke-dashoffset: -600;
stroke-dasharray: 100 1100;
stroke-dashoffset: -600;
image.png
🎈还不理解的话，也可以参考 这篇文章
代码如下：
<!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>
.overall {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
}
svg {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.text {
width: 300px;
height: 300px;
position: relative;
z-index: 5;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
rect#shape {
/* fill: red; */
stroke: white;
stroke-width: 5px;
/* stroke-dasharray:用于创建虚线，之所以后面跟的是array的，是因为值其实是数组 */
/* 虚线长 */
/* 虚线长 间距 */
/* 虚线长 虚线长 虚线长 */
animation: dong 1s linear infinite;
}
@keyframes dong {
0% {
stroke-dasharray: 100 1100;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 400 800;
stroke-dashoffset: -600;
/* stroke-opacity: 0.3; */
}
100% {
stroke-dasharray: 100 1100;
stroke-dashoffset: -1200;
}
}
</style>
</head>
<body>
<div class="overall">
<div class="text">
<span>SVG</span>
<svg height="300" width="300">
<rect id="shape" height="100%" width="100%" />
</svg>
</div>
</div>
</body>
</html>
