VUE CSS流动边框特效（一）

效果：

HTML：

<div class="divSide" />

CSS： 

.divSide {
  width: 460px;
  height: 994px;
  position: relative;
  background-color: #021025;
  border: 1px solid rgba(11, 85, 140, 0.5);
  &::before {
    content: "";
    position: absolute;
    display: block;
    height: 3px;
    width: 3px;
    background: #57b1ff;
    box-shadow: 0px 0px 6px 3px #0ff;
    margin-left: -4px;
    margin-top: -2px;
    transition: all 100s linear;
    border-radius: 100%;
    animation: star 100s linear infinite;
  }
}
@keyframes star {
  0%,
  100% {
    margin-left: -4px;
    margin-top: -2px;
  }
  20% {
    margin-left: 452px;
    margin-top: -2px;
  }
  50% {
    margin-left: 452px;
    margin-top: 992px;
  }
  80% {
    margin-left: -4px;
    margin-top: 992px;
  }
}