css 边框流光效果

UpSeven0

于 2024-07-15 13:43:00 发布

阅读量91

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_34811855/article/details/140436699

版权

div {
    display: flex;
    background: rgba(56, 93, 158, 0.25);
    border-radius: 8px;
    border: 1px solid #4ea7c5;
    width: 80%;
    margin: 0 auto;
    height: 200px;
    justify-content: space-around;
    position: relative;
    @keyframes movelineTop {
      0% {
        left: 0;
        top: 0;
        opacity: 1;
      }
      60% {
        left: 95%;
        top: 0;
        opacity: 0;
      }
      100% {
        left: 95%;
        top: 0;
        opacity: 0;
      }
    }
    @keyframes movelineRight {
      0% {
        right: 0;
        top: 0;
        opacity: 1;
      }
      20% {
        right: 0;
        top: 95%;
        opacity: 0;
      }
      100% {
        right: 0;
        top: 95%;
        opacity: 0;
      }
    }
    @keyframes movelineBom {
      0% {
        left: 95%;
        bottom: 0;
        opacity: 1;
      }
      60% {
        left: 5%;
        bottom: 0;
        opacity: 0;
      }
      100% {
        left: 5%;
        bottom: 0;
        opacity: 0;
      }
    }
    @keyframes movelineLeft {
      0% {
        left: 0;
        top: 77%;
        opacity: 1;
      }
      20% {
        left: 0;
        top: 5%;
        opacity: 0;
      }
      100% {
        left: 0;
        top: 5%;
        opacity: 0;
      }
    }
    .moveLine1,
    .moveLine2 {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      &.moveLine1::before,
      &.moveLine2::before {
        content: '';
        position: absolute;
        width: 50px;
        height: 1px;
        background: linear-gradient(to right, #49d9fc, #ffffff);
        // box-shadow: 2px 0px 1px 1px #49d9fc;
        opacity: 0;
      }
      &.moveLine1::after,
      &.moveLine2::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 40px;
        // box-shadow: 2px 0px 1px 1px #49d9fc;
        background: linear-gradient(to right, #49d9fc, #ffffff);
        opacity: 0;
      }
      &.moveLine1::before {
        animation: movelineTop 5s linear infinite 3s;
      }
      &.moveLine2::after {
        animation: movelineRight 5s linear infinite 6s;
      }
      &.moveLine2::before {
        animation: movelineBom 5s linear infinite 3s;
      }
      &.moveLine1::after {
        animation: movelineLeft 5s linear infinite 6s;
      }
    }
}