css实现穿越效果

实现思路:容器中其中包含两个盒子，给盒子一个星空背景图,每个盒子有六个面（右、左、上、下、前、后）。盒子通过 CSS 动画进行旋转和淡入淡出效果

代码实现

<template>
  <div class="s-background">
    <div class="scene">
      <div class="wrap">
        <div class="wall wall-right"></div>
        <div class="wall wall-left"></div>
        <div class="wall wall-top"></div>
        <div class="wall wall-bottom"></div>
        <div class="wall wall-back"></div>
      </div>
      <div class="wrap">
        <div class="wall wall-right"></div>
        <div class="wall wall-left"></div>
        <div class="wall wall-top"></div>
        <div class="wall wall-bottom"></div>
        <div class="wall wall-back"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.s-background {
  width: 100vw;
  height: 100vh;
  text-align: center;
  margin: 20% auto;
  //   background: rgb(182, 245, 176);
  .scene {
    text-align: center;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    perspective: 15px;
    perspective-origin: 50% 50%;
    // background: rgb(182, 245, 176);

    .wrap {
      text-align: center;
      position: absolute;
      width: 1000px;
      height: 1000px;
      left: -500px;
      top: -500px;
      transform-style: preserve-3d;
      animation: move 12s infinite linear;
      animation-fill-mode: forwards;
      .wall {
        width: 100%;
        height: 100%;
        position: absolute;
        // 图片文件位置
        background: url('../assets/images/sg.jpg');
        background-size: cover;
        opacity: 0;
        animation: fade 12s infinite linear;
      }
      .wall-right {
        transform: rotateY(90deg) translateZ(500px);
      }
      .wall-left {
        transform: rotateY(-90deg) translateZ(500px);
      }
      .wall-top {
        transform: rotateX(90deg) translateZ(500px);
      }
      .wall-bottom {
        transform: rotateX(-90deg) translateZ(500px);
      }
      .wall-back {
        transform: rotateX(180deg) translateZ(500px);
      }
    }
    .wrap:nth-child(2) {
      animation: move 12s infinite linear;
      animation-delay: 6s;
    }
    .wrap:nth-child(2) .wall {
      animation-delay: 6s;
    }
  }

  @keyframes move {
    0% {
      transform: translateZ(-500px) rotate(0deg);
    }
    100% {
      transform: translateZ(500px) rotate(0deg);
    }
  }
  @keyframes fade {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
</style>

附件图：

效果展示：