时空穿梭特效html - 喜欢网络

示意图：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>时空穿梭2</title>
    <!-- 文章地址 https://juejin.cn/post/7028757824695959588 -->
    <style>
      html,
      body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #000;
        text-align: center;
      }

      body:before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }

      .g-container {
        display: inline-block;
        perspective: 4px;
        perspective-origin: 50% 50%;
        position: relative;
        animation: hueRotate 21s infinite linear;
      }

      .g-group {
        position: absolute;
        width: 1000px;
        height: 1000px;
        left: -500px;
        top: -500px;
        transform-style: preserve-3d;
        animation: move 12s infinite linear;
        animation-fill-mode: forwards;
      }

      .g-group:nth-child(2) {
        animation: move 12s infinite linear;
        animation-delay: -6s;
      }

      .item {
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(./bg.jpg);
        background-size: cover;
        opacity: 1;
        animation: fade 12s infinite linear;
        animation-delay: 0;
      }

      .g-group:nth-child(2) .item {
        animation-delay: -6s;
      }

      .item-right {
        /* background: red; */
        transform: rotateY(90deg) translateZ(500px);
      }

      .item-left {
        /* background: green; */
        transform: rotateY(-90deg) translateZ(500px);
      }

      .item-top {
        /* background: blue; */
        transform: rotateX(90deg) translateZ(500px);
      }

      .item-bottom {
        /* background: deeppink; */
        transform: rotateX(-90deg) translateZ(500px);
      }

      .item-middle {
        /* background: rgba(255, 255, 255, 0.5); */
        transform: rotateX(180deg) translateZ(1000px);
      }

      @keyframes move {
        0% {
          transform: translateZ(-500px) rotate(0deg);
        }
        100% {
          transform: translateZ(500px) rotate(0deg);
        }
      }

      @keyframes fade {
        0% {
          opacity: 0;
        }
        25%,
        60% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }

      @keyframes hueRotate {
        0% {
          filter: hue-rotate(0);
        }
        100% {
          filter: hue-rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="g-container">
      <div class="g-group">
        <div class="item item-right"></div>
        <div class="item item-left"></div>
        <div class="item item-top"></div>
        <div class="item item-bottom"></div>
        <div class="item item-middle"></div>
      </div>
      <div class="g-group">
        <div class="item item-right"></div>
        <div class="item item-left"></div>
        <div class="item item-top"></div>
        <div class="item item-bottom"></div>
        <div class="item item-middle"></div>
      </div>
    </div>
  </body>
</html>