css实现div边框光效流转

需求：边框需要实现流转光色渐变

根据div设置的宽高

简易图例

设置一个div盒子

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

给四个div加上动画

.light:nth-child(1) {
    filter: hue-rotate(0deg); // 可以选取颜色
    //给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
    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) {

    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) {

    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) {
    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%;
    }
  }

搞定