css流光动效

最新推荐文章于 2024-06-03 16:33:41 发布

小白白一枚111

最新推荐文章于 2024-06-03 16:33:41 发布

阅读量1.1k

点赞数

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/weixin_50166856/article/details/122425514

版权

      <div class="box">
                <div class="outContainer">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="outContainer">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="outContainer">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="outContainer">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>

  .box {
    width: remit(700);
    display: flex;
    justify-content: space-between;

    .outContainer {
      /*width: ...; 依据实际给width*/
      margin-top: remit(20);
      position: relative;
      overflow: hidden;
      width: remit(150);
      height: remit(150);
      background-color: rgb(131, 12, 16);

      span {
        position: absolute;
        display: block;
      }

      span:nth-child(1) {
        top: 0;
        left: 0;
        width: 100%;
        height: remit(2);
        animation: animate1 2s linear;
      }

      span:nth-child(2) {
        top: -100%;
        right: 0;
        width: remit(2);
        height: 100%;
        animation: animate2 2s linear;
        animation-delay: 0.5s;
      }

      span:nth-child(3) {
        bottom: 0;
        right: 0;
        width: 100%;
        height: remit(2);
        animation: animate3 2s linear;
        animation-delay: 1s;
      }

      span:nth-child(4) {
        bottom: -100%;
        left: 0;
        width: remit(2);
        height: 100%;
        animation: animate4 2s linear;
        animation-delay: 1.5s;
      }

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

        50%,
        100% {
          left: 100%;
          background: yellow;
        }
      }

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

        50%,
        100% {
          background: yellow;
          top: 100%;
        }
      }

      @keyframes animate3 {
        0% {
          background: yellow;
          right: -100%;
        }

        50%,
        100% {
          background: yellow;
          right: 100%;
        }
      }

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

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

    .outContainer:nth-of-type(2) {
      span:nth-child(1) {
        animation-delay: 2s;
      }

      span:nth-child(2) {
        animation-delay: 2.5s;
      }

      span:nth-child(3) {
        animation-delay: 3s;
      }

      span:nth-child(4) {
        animation-delay: 3.5s;
      }
    }

    .outContainer:nth-of-type(3) {
      span:nth-child(1) {
        animation-delay: 4s;
      }

      span:nth-child(2) {
        animation-delay: 4.5s;
      }

      span:nth-child(3) {
        animation-delay: 5s;
      }

      span:nth-child(4) {
        animation-delay: 5.5s;
      }
    }

    .outContainer:nth-of-type(4) {
      span:nth-child(1) {
        animation-delay: 6s;
      }

      span:nth-child(2) {
        animation-delay: 6.5s;
      }

      span:nth-child(3) {
        animation-delay: 7s;
      }

      span:nth-child(4) {
        animation-delay: 7.5s;
      }
    }
  }