svg+css实现不规则虚线框流动效果

方法一：
用来实现规则矩形

.box {
  width: 850px;
  height: 195px;
  color: #000;
  position: absolute;
  left: 809px;
  top: 373px;
  z-index: 2;
  background: linear-gradient(90deg, #a84d31 50%, transparent 0) repeat-x,
    linear-gradient(90deg, #a84d31 50%, transparent 0) repeat-x,
    linear-gradient(0deg, #a84d31 50%, transparent 0) repeat-y,
    linear-gradient(0deg, #a84d31 50%, transparent 0) repeat-y;
  background-size: 16px 3px, 16px 3px, 3px 16px, 3px 16px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  animation: linearGradientMove 0.3s infinite linear;
}
// 虚线动画
@keyframes linearGradientMove {
 100% {
   background-position: 16px 0, -16px 100%, 0 -16px, 100% 16px;
}

方法二：
使用svg+css可以实现规则矩形和不规则形状的虚线框流动效果

 <div class="an-line-box">
   <svg height="100%" width="100%"> xmlns="http://www.w3.org/2000/svg">
       <polyline class="g-dashed-line" points="4 3 195 3 195 471 4 471 4 3" stroke="#ddd" fill="transparent" stroke-width="2.5" />
   </svg>
 </div>

css部分

.an-line-box {
  width: 670px;
  height: 550px;
  position: absolute;
  left: 5px;
  top: 286px;
  .g-dashed-line {
    stroke: #80eafd;
    stroke-dasharray: 8, 7;
    stroke-dashoffset: 0;
    animation: move 19s infinite linear;
  }
}
@keyframes move {
  0% {
      stroke-dashoffset: 0;
  }
  100% {
      stroke-dashoffset: -1000;
  }
}