<div class="hulk">
  <div class="head">
    <div class="hair"></div>
    <div class="eyes"></div>
    <div class="tension"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
    <div class="ear_side"></div>
  </div>
  <div class="torso">
    <div class="chest"></div>
    <div class="chest_line"></div>
  </div>
  <div class="torso">
    <div class="chest"></div>
    <div class="chest_line"></div>
  </div>
  <div class="torso">
    <div class="chest"></div>
    <div class="chest_line"></div>
  </div>
  <div class="shorts">
    <div class="left_short">
      <div class="leg"></div>
    </div>
    <div class="right_short">
      <div class="leg"></div>
    </div>
  </div>
  <div class="gas">
    <div style="--i:1" class="gas_particles"></div>
    <div style="--i:6" class="gas_particles"></div>
    <div style="--i:4" class="gas_particles"></div>
    <div style="--i:7" class="gas_particles"></div>
    <div style="--i:8" class="gas_particles"></div>
    <div style="--i:10" class="gas_particles"></div>
    <div style="--i:2" class="gas_particles"></div>
    <div style="--i:3" class="gas_particles"></div>
    <div style="--i:9" class="gas_particles"></div>
    <div style="--i:5" class="gas_particles"></div>
  </div>

  <div class="arm">
    <div class="upper_arm"></div>
    <div class="fore_arm"></div>
    <div class="fist"></div>
    <div class="upper_arm_shadow"></div>
    <div class="fore_arm_shadow"></div>
    <div class="fist_shadow"></div>
  </div>
  <div class="arm">
    <div class="upper_arm"></div>
    <div class="fore_arm"></div>
    <div class="fist"></div>
  </div>
</div>
* {
  margin: 0px;
  padding: 0px;
}
.hulk {
  position: absolute;
  height: 500px;
  width: 300px;

  transform: translate(-50%, -50%) scale(1);
  top: 50%;
  left: 50%;
}
.hulk:before {
  content: "";
  position: absolute;
  display: block;
  width: 500px;
  height: 5px;
  margin-top: 450px;
  margin-left: -100px;
  background: black;
  z-index: -1;
}
.hulk .head {
  position: absolute;
  height: 160px;
  width: 120px;
  border-radius: 80% 30% 0 0;
  background: #81d176;
  z-index: 1;
}
.hulk .hair {
  position: absolute;
  height: 40px;
  width: 130px;
  background: black;
  transition: 0.4s;
  animation: hair 3400ms 1 forwards;
  border-radius: 100% 40% 10% 0;
}
@keyframes hair {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2px);
  }
}
.hulk .hair:after,
.hulk .hair:before {
  content: "";
  position: absolute;
  height: 30px;
  width: 30px;
  background: inherit;
  transform: translate(97px, 35px);
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
}

.hulk .hair:before {
  transform: translate(114px, 38px) rotateZ(-40deg);
}

.hulk .ear_side {
  position: absolute;
  height: 50px;
  width: 40px;
  border-radius: 50%;
  background: #62af62;
  transform: rotateZ(15deg) translate(115px, 14px);
  z-index: -1;
}
.hulk .ear_side:after {
  content: "";
  position: absolute;
  display: block;
  height: 88px;
  width: 26px;
  background-color: inherit;
  transform: rotateZ(-15deg) translate(5px, 30px);
  border-radius: 5px;
}

.head .eyes,
.head .tension {
  position: absolute;
  height: 15px;
  width: 10px;
  border-radius: 50%;
  background: black;
  transform: translate(20px, 70px);
}
.head .tension {
  width: 5px;
  height: 15px;
  border-radius: 20px;
  background: #62af62;
  transform: translate(40px, 54px);
  animation: brow 2ms 6000ms 1 forwards;
}
.head .tension:before {
  content: "";
  position: absolute;
  height: 10px;
  width: 5px;
  background: inherit;
  border-radius: 20px;
  transform: translate(12px, 5px);
}
.head .eyes:after {
  content: "";
  position: absolute;
  height: 15px;
  width: 10px;
  border-radius: 50%;
  background: inherit;
  transform: translate(50px, 0px);
}
.head .eyes:before {
  content: "";
  position: absolute;
  height: 4px;
  width: 60px;
  border-radius: 20px;
  background: #62af62;
  transform: translateY(-2px);
  z-index: 100;
  animation: brow 2ms 6000ms 1 forwards;
}
@keyframes brow {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.head .nose {
  position: absolute;
  height: 30px;
  width: 20px;
  border-radius: 40%;
  background: #81abbd;
  transform: translate(40px, 72px) rotateZ(10deg);
  z-index: 9;
}
.head .mouth {
  position: absolute;
  position: absolute;
  height: 10px;
  width: 80px;
  border-radius: 20px;
  background: #62af62;
  transform: translate(10px, 101px);
  z-index: 8;
  animation: mouth 2ms 6000ms 1 forwards;
}
@keyframes mouth {
  from {
    width: 80px;
    margin-left: 0px;
    margin-top: 0px;
  }
  to {
    width: 10px;
    margin-left: 30px;
    margin-top: 10px;
  }
}
.torso {
  position: absolute;
  width: 130px;
  height: 185px;
  background: #81d176;
  transform: translate(0px, 150px);
  z-index: 0;
  border-radius: 0 30% 30% 50px;
}
.torso:nth-child(2) {
  margin-left: 5px;
  margin-top: 2px;
  background: #62af62;
}
.torso:nth-child(2) .chest,
.torso:nth-child(2) .chest_line {
  background: #62af62;
}

.torso:nth-child(3) {
  margin-top: -5px;
  margin-left: 8px;
  background: #62af62;
}
.torso:nth-child(3) .chest,
.torso:nth-child(3) .chest_line {
  background: #62af62;
}
.torso .chest {
  position: absolute;
  width: 150px;
  height: 180px;
  border-radius: 50%;
  background: #81d176;
  transform: translate(-60px, 9px) rotateZ(-30deg);
}
.torso .chest:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 180px;
  border-radius: 50%;
  background: inherit;
  transform: translate(100px, 40px) rotateZ(60deg);
}
.torso .chest_line {
  position: absolute;
  transform: translate(30px, 40px);
  height: 70px;
  width: 5px;
  border-radius: 20% 50%;
  background: #62af62;
}
.torso .chest_line:before,
.torso .chest_line:after {
  content: "";
  position: absolute;
  transform: translate(-20px, 60px) rotateZ(60deg);
  height: 30px;
  width: 4px;
  border-radius: 100px;
  background: inherit;
}
.torso .chest_line:after {
  height: 20px;
  transform: translate(20px, 65px) rotateZ(-30deg);
}

.arm {
  position: absolute;
  height: 200px;
  width: 150px;
}
.arm:last-child {
  z-index: -1;
  transform: translate(-10px, 5px) rotateY(180deg) scale(1.2, 1.1);
}

.arm:last-child .upper_arm,
.arm:last-child .fore_arm,
.arm:last-child .fist {
  background: #62af62;
}

.arm .upper_arm,
.arm .fore_arm,
.arm .upper_arm_shadow,
.arm .fore_arm_shadow {
  position: absolute;
  height: 90px;
  width: 50px;
  background: #81d176;
  z-index: 11;
  border-radius: 5px;
  transform-origin: 0 50%;
  transform: translate(150px, 190px) rotateZ(-40deg);
}
.arm .fore_arm,
.arm .fore_arm_shadow {
  transform: translate(175px, 230px) rotateZ(0deg);
  height: 100px;
  width: 45px;
  border-radius: 0 30% 40% 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
}
.arm .fist,
.arm .fist_shadow {
  position: absolute;
  height: 50px;
  width: 60px;
  background: #81d176;
  transform: translate(152px, 290px) rotateZ(40deg);
  border-radius: 50%;
}
.arm .fist_shadow,
.arm .fore_arm_shadow,
.arm .upper_arm_shadow {
  background: #62af62;
  margin-left: 10px;
  z-index: -1;
}
.shorts {
  position: absolute;
  height: 120px;
  width: 130px;
  z-index: -1;
  transform: translate(0px, 300px);
}
.left_short,
.right_short {
  position: absolute;
  height: 100px;
  width: 65px;
  background: linear-gradient(0deg, #8700b2, #ac00e3);
  border-radius: 0% 0 0 0;
}
.right_short {
  height: 110px;
  margin-left: 65px;
  border-radius: 0 20% 0 0;
}
.left_short:after,
.right_short:after {
  content: "";

  display: block;
  width: 100%;
  height: 20px;
  background: #8700b2;
  margin-top: 100px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    90% 30%,
    80% 100%,
    70% 30%,
    60% 100%,
    50% 30%,
    40% 100%,
    30% 30%,
    20% 100%,
    10% 30%,
    0 100%
  );
}
.right_short:after {
  margin-top: 110px;
}
.left_short .leg,
.right_short .leg {
  height: 70px;
  width: 45px;
  position: absolute;
  background: #81d176;
  z-index: -1;
  transform: translate(5px, 72px) rotateZ(-5deg);
  box-shadow: 3px 0px 0px #62af62;
}
.left_short .leg:after,
.right_short .leg:after {
  content: "";
  display: block;
  height: 30px;
  width: 70px;
  border-radius: 0 30% 0 0;
  clip-path: polygon(0 80%, 40% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 3px 0px 0px #62af62;
  transform: translate(-20px, 65px) rotateZ(5deg);
  background: inherit;
}
.right_short .leg {
  transform: translate(10px, 72px) rotateZ(-5deg) rotateY(180deg);
  z-index: -1;
}
.right_short .leg:after {
  transform: translate(-20px, 65px) rotateZ(-5deg);
}
.right_short:before {
  content: "";
  position: absolute;
  background: linear-gradient(0deg, #8700b2, #ac00e3);
  height: 90px;
  width: 90px;
  border-radius: 50%;
  transform: translateY(10px) scale(0, 1);
  animation: inflate 1s 3s 1 ease-out forwards;
  z-index: 0;
}
@keyframes inflate {
  0% {
    transform: translateY(10px) scale(0, 1);
  }
  100% {
    transform: translateY(10px) scale(1, 1);
    opacity: 1;
  }
}
.gas {
  position: absolute;
  display: flex;
  flex-direction: column;

  z-index: -1;
  height: 100px;
  width: 200px;
  transform: translate(100px, 300px);
}
.gas_particles {
  height: 50px;
  width: 50px;
  background: black;
  border-radius: 50%;
  animation: gas 5s linear infinite;
  filter: blur(8px);
  opacity: 0;
  animation-delay: calc(var(--i) * 0.5s + 3.3s);
}
.gas_particles:nth-child(2n + 1) {
  background: #ffdc00;
}
.gas_particles:nth-child(2n) {
  background: #ffae00;
}
@keyframes gas {
  0% {
    transform: translateX(0px) scaleY(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateX(120px) scaleY(5);
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    transform: translateX(240px) scaleY(10);
    opacity: 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.