css 边框流光效果

前端在做一些界面，尤其是当下各种忽悠人的大屏盛行。就得用一些稍微炫酷唬人点的东西给大家伙瞅瞅，不然怎么忽悠别人。

图示：

以下是代码，如果不想研究实现原理可直接复制粘贴。

首先边框，在原有的边框内部需要加两个元素作为两条线，另外两条线用伪类元素--before和after。

<div class="box">
        <i class="top"></i><i class="bottom"></i>
</div>复制

style如下，这里用了scss 可根据需求自行更改。

<style scoped lang="scss">
.box {
    width: 40%;
    height: 100%;
    border: 1px solid #00bbff;
    position: relative;
    overflow: hidden;
    &::before {
      content: ' ';
      position: absolute;
      width: 4px;
      height: 100%;
      top: -100%;
      left: 0;
      background-image: linear-gradient(
        0deg,
        transparent,
        #74efff,
        transparent
      );
      animation: two 4s linear infinite;
    }
    &::after {
      content: ' ';
      position: absolute;
      width: 4px;
      height: 100%;
      bottom: -100%;
      right: 0;
      background-image: linear-gradient(
        360deg,
        transparent,
        #74efff,
        transparent
      );
      animation: four 4s linear 2s infinite;
    }
    i {
      position: absolute;
      display: inline-block;
      height: 4px;
      width: 100%;
    }
    .bottom {
      bottom: 0;
      left: -100%;
      background-image: linear-gradient(
        270deg,
        transparent,
        #74efff,
        transparent
      );
      animation: one 4s linear 1s infinite;
    }
    .top {
      top: 0;
      right: -100%;
      background-image: linear-gradient(
        270deg,
        transparent,
        #74efff,
        transparent
      );
      animation: three 4s linear 3s infinite;
    }}
@keyframes one {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
 
@keyframes two {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}
 
@keyframes three {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}
 
@keyframes four {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
</style>复制