VUE CSS流动边框特效（二）

 效果：

HTML: 

 <div class="divSide">
    <span class="s-1" />
    <span class="s-2" />
    <span class="s-3" />
    <span class="s-4" />
</div>

CSS :

.divSide {
  overflow: hidden;
  width: 460px;
  height: 994px;
  position: relative;
  background-color: #021025;
  border: 1px solid rgba(11, 85, 140, 0.5);
  >span{
    position: absolute;
    display: block;
  }
  .s-1 {
    filter: hue-rotate(0deg);
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3a86ff);
    animation: animate1 1s linear infinite;
  }
  .s-2 {
    filter: hue-rotate(60deg);
    top: -100%;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #3a86ff);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
  }
  .s-3 {
    filter: hue-rotate(120deg);
    bottom: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(270deg, transparent, #3a86ff);
    animation: animate3 1s linear infinite;
    animation-delay: 0.5s;
  }
  .s-4 {
    filter: hue-rotate(300deg);
    bottom: -100%;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #3a86ff);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
  }
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
    height: 3px;
  }
  50%,
  100% {
    height: 2px;
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}