SOURCE

console 命令行工具 X clear

                    
>
console
<div class="paper_man_wrapper">
  <div class="paper_man">
    <div class="paper_man_body part">
      <div class="paper_man_head part"></div>
      <div class="paper_man_arm left">
        <div class="paper_man_arm_1 part">
          <div class="paper_man_arm_2 part">
            <div class="paper_man_arm_hand part"></div>
          </div>
        </div>
      </div>
      <div class="paper_man_arm right">
        <div class="paper_man_arm_1 part">
          <div class="paper_man_arm_2 part">
            <div class="paper_man_arm_hand part"></div>
          </div>
        </div>
      </div>
      <div class="paper_man_leg left">
        <div class="paper_man_leg_1 part">
          <div class="paper_man_leg_2 part">
            <div class="paper_man_leg_foot part"></div>
          </div>
        </div>
      </div>
      <div class="paper_man_leg right">
        <div class="paper_man_leg_1 part">
          <div class="paper_man_leg_2 part">
            <div class="paper_man_leg_foot part"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
  perspective: 500px;
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.paper_man_wrapper {
  animation: cameraY 7000ms linear infinite;
}
.paper_man {
  top: -100px;
  left: -50px;
  animation: cameraX 5000ms ease-in-out infinite alternate;
  .part {
    background: rgba(0, 0, 0, 1);
    backface-visibility: hidden;
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(100, 100, 100, 1);
      transform: rotateY(180deg);
      backface-visibility: hidden;
    }
  }
  &_body {
    transform-origin: 50% 100%;
    transform: rotateX(-20deg);
    width: 60px;
    height: 100px;
    animation: shake4 2000ms -100ms ease-in-out infinite;
  }
  &_head {
    transform-origin: 50% 100%;
    top: -40px;
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    transform: rotateX(-10deg);
    animation: shake4 1000ms -800ms ease-in-out infinite;
  }
  &_arm {
    &.left {
      transform-origin: 0 0;
      right: 0px;
      animation: shake1 1000ms -400ms ease-in-out infinite;
    }
    &.right {
      transform-origin: 100% 0;
      left: -20px;
      animation: shake1 1000ms -900ms ease-in-out infinite;
    }
    &_1 {
      transform-origin: 50% 0;
      width: 20px;
      height: 50px;
    }
    &_2 {
      transform-origin: 50% 0;
      bottom: -50px;
      width: 20px;
      height: 50px;
      .left & {
        animation: shake3 1000ms -800ms ease-in-out infinite;
      }
      .right & {
        animation: shake3 1000ms -300ms ease-in-out infinite;
      }
    }
    &_hand {
      transform-origin: 50% 0;
      bottom: -15px;
      width: 20px;
      height: 15px;
      .left & {
        animation: shake3 1000ms -200ms ease-in-out infinite;
      }
      .right & {
        animation: shake3 1000ms -700ms ease-in-out infinite;
      }
    }
  }
  &_leg {
    transform-origin: 50% 0;
    top: 100px;
    &.left {
      right: 30px;
      animation: shake1 1000ms ease-in-out infinite;
    }
    &.right {
      left: 0;
      animation: shake1 1000ms -500ms ease-in-out infinite;
    }
    &_1 {
      transform-origin: 50% 0;
      width: 30px;
      height: 50px;
    }
    &_2 {
      transform-origin: 50% 0;
      bottom: -40px;
      width: 30px;
      height: 40px;
      .left & {
        animation: shake2 1000ms -600ms ease-in-out infinite;
      }
      .right & {
        animation: shake2 1000ms -100ms ease-in-out infinite;
      }
    }
    &_foot {
      transform-origin: 50% 0;
      bottom: -20px;
      width: 30px;
      height: 20px;
      .left & {
        animation: shake3 1000ms -400ms ease-in-out infinite;
      }
      .right & {
        animation: shake3 1000ms -900ms ease-in-out infinite;
      }
    }
  }
}

@keyframes shake1 {
  0% {
    transform: rotateX(80deg);
  }
  50% {
    transform: rotateX(-80deg);
  }
  100% {
    transform: rotateX(80deg);
  }
}

@keyframes shake2 {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-100deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes shake3 {
  0% {
    transform: rotateX(10deg);
  }
  50% {
    transform: rotateX(120deg);
  }
  100% {
    transform: rotateX(10deg);
  }
}

@keyframes shake4 {
  0% {
    transform: rotateX(-30deg);
  }
  50% {
    transform: rotateX(-10deg);
  }
  100% {
    transform: rotateX(-30deg);
  }
}

@keyframes cameraY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes cameraX {
  0% {
    transform: rotateX(-50deg);
  }
  100% {
    transform: rotateX(50deg);
  }
}