css 实现盒子边框炫酷流动动画效果

效果

 

1.html

在盒子里面增加四个span标签

<div class="login_form">
      <span class="light"></span><span class="light"></span><span class="light"></span><span class="light"></span>
...
</div>

2.css

.login_form {position: absolute;}// 自定义盒子宽高
.light {
      position: absolute;
      display: block;
    }
    .light:nth-child(1) {
      filter: hue-rotate(0deg);
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, transparent, #3a86ff);
      animation: animate1 8s linear infinite;
    }

    @keyframes animate1 {
      0% {
        left: -100%;
      }

      50%,
      100% {
        left: 100%;
      }
    }
    .light:nth-child(2) {
      filter: hue-rotate(60deg);
      top: -100%;
      right: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(180deg, transparent, #3a86ff);
      animation: animate2 8s linear infinite;
      animation-delay: 2s;
    }

    @keyframes animate2 {
      0% {
        top: -100%;
      }

      50%,
      100% {
        top: 100%;
      }
    }
    .light:nth-child(3) {
      filter: hue-rotate(120deg);
      bottom: 0;
      right: 0;
      width: 100%;
      background: linear-gradient(270deg, transparent, #3a86ff);
      animation: animate3 8s linear infinite;
      animation-delay: 4s;
    }

    @keyframes animate3 {
      0% {
        right: -100%;
        height: 3px;
      }

      50%,
      100% {
        height: 2px;
        right: 100%;
      }
    }
    .light:nth-child(4) {
      filter: hue-rotate(300deg);
      bottom: -100%;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(360deg, transparent, #3a86ff);
      animation: animate4 8s linear infinite;
      animation-delay: 6s;
    }

    @keyframes animate4 {
      0% {
        bottom: -100%;
      }

      50%,
      100% {
        bottom: 100%;
      }
    }
  }