效果演示

html 代码

<link rel="stylesheet" href="index.css">
<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>

css 代码

body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: "Anton", sans-serif;
  justify-content: center;
  align-items: center;
  perspective: 500px;
}* {
  transform-style: preserve-3d;
}div {position: absolute;transform-style: preserve-3d;
}.paper_man_wrapper {-webkit-animation: cameraY 7000ms linear infinite;animation: cameraY 7000ms linear infinite;
}
.paper_man {top: -100px;
 left: -50px;-webkit-animation: cameraX 5000ms ease-in-out infinite alternate;animation: cameraX 5000ms ease-in-out infinite alternate;
}.paper_man .part {
  background: black;
  -webkit-backface-visibility: hidden;backface-visibility: hidden;}.paper_man .part::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #646464;
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;}.paper_man_body {transform-origin: 50% 100%;transform: rotateX(-20deg);
  width: 60px;
  height: 100px;
  -webkit-animation: shake4 2000ms -100ms ease-in-out infinite;animation: shake4 2000ms -100ms ease-in-out infinite;
}
.paper_man_head {
  transform-origin: 50% 100%;
  top: -40px;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  transform: rotateX(-10deg);
  -webkit-animation: shake4 1000ms -800ms ease-in-out infinite;
          animation: shake4 1000ms -800ms ease-in-out infinite;
}.paper_man_arm.left {transform-origin: 0 0;right: 0px;transform: rotateX(190deg);}.paper_man_arm.right {transform-origin: 100% 0;left: -20px;transform: rotateX(200deg);}.paper_man_arm_1 {transform-origin: 50% 0;width: 20px;
  height: 50px;
}.paper_man_arm_2 {
  transform-origin: 50% 0;bottom: -50px;width: 20px;height: 50px;
}.left .paper_man_arm_2 {transform: rotateX(30deg);
}.right .paper_man_arm_2 {transform: rotateX(30deg);
}.paper_man_arm_hand {transform-origin: 50% 0;bottom: -15px;width: 20px;height: 15px;
}.left .paper_man_arm_hand {
  -webkit-animation: shake3 1000ms -200ms ease-in-out infinite;
          animation: shake3 1000ms -200ms ease-in-out infinite;
}.right .paper_man_arm_hand {
  -webkit-animation: shake3 1000ms -700ms ease-in-out infinite;
          animation: shake3 1000ms -700ms ease-in-out infinite;
}.paper_man_leg {
  transform-origin: 50% 0;
  top: 100px;
}.paper_man_leg.left {
  right: 30px;
  -webkit-animation: shake1 200ms ease-in-out infinite;
          animation: shake1 200ms ease-in-out infinite;
}.paper_man_leg.right {
  left: 0;
  -webkit-animation: shake1 200ms -100ms ease-in-out infinite;animation: shake1 200ms -100ms ease-in-out infinite;}.paper_man_leg_1 {
  transform-origin: 50% 0;
  width: 30px;
  height: 50px;}.paper_man_leg_2 {
  transform-origin: 50% 0;
  bottom: -40px;
  width: 30px;
  height: 40px;
}.left .paper_man_leg_2 {
  -webkit-animation: shake2 200ms -120ms ease-in-out infinite;
          animation: shake2 200ms -120ms ease-in-out infinite;
}.right .paper_man_leg_2 {
  -webkit-animation: shake2 200ms -20ms ease-in-out infinite;
          animation: shake2 200ms -20ms ease-in-out infinite;
}.paper_man_leg_foot {transform-origin: 50% 0;bottom: -20px;width: 30px;height: 20px;
}.left .paper_man_leg_foot {
  -webkit-animation: shake3 200ms -80ms ease-in-out infinite;
          animation: shake3 200ms -80ms ease-in-out infinite;
}.right .paper_man_leg_foot {
  -webkit-animation: shake3 200ms -180ms ease-in-out infinite;animation: shake3 200ms -180ms ease-in-out infinite;
}@-webkit-keyframes shake1 {0% {transform: rotateX(80deg);}50% {transform: rotateX(-80deg); }100% {transform: rotateX(80deg); }}@keyframes shake1 {0% {transform: rotateX(80deg);0{transform: rotateX(-80deg);
  }100% {transform: rotateX(80deg);}}@-webkit-keyframes shake2 {
  0% {
    transform: rotateX(0deg);
  }50% {transform: rotateX(-100deg);}100% {transform: rotateX(0deg);}}@keyframes shake2 {
  0% {transform: rotateX(0deg);
  }50% {transform: rotateX(-100deg);
  }100% {transform: rotateX(0deg);
  }}@-webkit-keyframes shake3 {0% {transform: rotateX(10deg);}50% { transform: rotateX(120deg); }100% { transform: rotateX(10deg);
  }}@keyframes shake3 {0% { transform: rotateX(10deg);}50% {transform: rotateX(120deg);}100% {transform: rotateX(10deg);}}@-webkit-keyframes shake4 { 0% {transform: rotateX(30deg);}50% { transform: rotateX(10deg);}100% {transform: rotateX(30deg); }}@keyframes shake4 {0% {transform: rotateX(30deg);}50% { transform: rotateX(10deg);}100% {transform: rotateX(30deg);}}@-webkit-keyframes cameraY {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}@keyframes cameraY { 0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg); }}@-webkit-keyframes cameraX {0% { transform: rotateX(-50deg);
  }100% {transform: rotateX(50deg);
  }
}@keyframes cameraX {
  0% {transform: rotateX(-50deg);
  }100% {transform: rotateX(50deg);
  }
}