环绕式CSS边框动画

您可以考虑使用一个小的SVG（定义边界）来轻松实现此目的，然后为 stroke-dashoffset

.square {
  display:inline-block;
  margin:5px;
  width:200px;
  height:100px;
  position:relative;
  vertical-align:top;
}


svg {
 overflow:visible;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}

rect {
 fill:transparent;
 stroke:#FB0;
 stroke-dasharray: 1000;
 stroke-dashoffset: 1000;
 animation:change 5s linear forwards;
}

@keyframes change {
  to {
   stroke-dashoffset: 0;
  }
}

body {
  background: black;
}