html+css: 打招呼的卡比兽动画

 

body

<div class="snorlax">
  <div class="snorlax__head">
    <div class="snorlax__head-outline"></div>
    <div class="snorlax__ear snorlax__ear--left"></div>
    <div class="snorlax__ear snorlax__ear--right"></div>
    <div class="snorlax__brow snorlax__brow--left"></div>
    <div class="snorlax__brow snorlax__brow--right"></div>
    <div class="snorlax__eye snorlax__eye--left"></div>
    <div class="snorlax__eye snorlax__eye--right"></div>
    <div class="snorlax__mouth">
      <div class="snorlax__tooth snorlax__tooth--left"></div>
      <div class="snorlax__tooth snorlax__tooth--right"></div>
    </div>
  </div>
  <div class="snorlax__arm-left">
    <div class="snorlax__arm-wrapper">
      <div class="snorlax__claws--left"></div>
      <div class="snorlax__arm-left-arm"></div>
    </div>
  </div>
  <div class="snorlax__arm-right">
    <div class="snorlax__claws--right"></div>
    <div class="snorlax__arm-right-arm"></div>
    <div class="snorlax__claw"></div>
  </div>
  <div class="snorlax__body">
    <div class="snorlax__body-shade"></div>
    <div class="snorlax__belly">
      <div class="snorlax__belly-segment snorlax__belly-segment--one"></div>
      <div class="snorlax__belly-segment snorlax__belly-segment--two"></div>
    </div>
  </div>
  <div class="snorlax__left-foot">
    <div class="snorlax__left-foot-foot"></div>
    <div class="snorlax__foot-claw snorlax__foot-claw--one">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--two">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--three">
      <div></div>
    </div>
  </div>
  <div class="snorlax__right-foot">
    <div class="snorlax__right-foot-foot"></div>
    <div class="snorlax__foot-claw snorlax__foot-claw--four">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--five">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--six">
      <div></div>
    </div>
  </div>
</div>

 

css

*,
*:after,
*:before {
  box-sizing: border-box;
}
:root {
  --size: 60;
  --unit: calc((var(--size) / 300) * 1vmin);
  --belly: #f1debb;
  --dark-belly: #b59c78;
  --body: #355a50;
  --dark-body: #162c37;
  --foot: #965b3c;
  --claws: #fafafa;
}
body {
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  background: #177082;
  -webkit-box-pack: center;
          justify-content: center;
}
.snorlax {
  height: calc(237 * var(--unit));
  width: calc(300 * var(--unit));
  position: relative;
}
.snorlax *,
.snorlax *:after,
.snorlax *:before {
  position: absolute;
}
.snorlax:before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  border-radius: 50%;
  -webkit-filter: blur(10px);
          filte