Norm

by IceCreamYou

HTML

<div id="track">
  <div id="body">
    <div id="eye" class="body-part">
      <div id="pupil"></div>
    </div>
    <div id="arm" class="body-part">
      <div id="hand" class="body-part"></div>
    </div>
    <div id="leg-left" class="body-part"></div>
    <div id="leg-right" class="body-part"></div>
  </div>
</div>

CSS

body {
  background-color: #FFF;
  margin: 0;
  zoom: 4;
}
#track {
  height: 131px;
  border: 10px solid #FFF;
  z-index: 0;
  position: relative;
}
#body {
  width: 60px;
  height: 100px;
  background-color: #CCC;
  border: 3px solid #333;
  box-sizing: border-box;
  position: relative;
  border-radius: 0 16px 16px 16px;
}
.body-part {
  position: absolute;
  border: 3px solid #333;
  box-sizing: border-box;
}
#eye {
  width: 16px;
  height: 16px;
  border-radius: 11px;
  top: 10px;
  right: 5px;
  background-color: #FAFAFA;
}
#pupil {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  top: 3px;
  right: 0px;
  background-color: #333;
}
#arm {
  width: 15px;
  height: 55px;
  background-color: #AAA;
  top: 45px;
  left: 18px;
  transform-origin: 50% 0;
  border-radius: 8px 4px 0 0;
  transform: rotate(-80deg);
}
#hand {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #AAA;
  top: 40px;
  left: -5px;
}
#leg-left,
#leg-right {
  width: 20px;
  height: 40px;
  background-color: #AAA;
  top: 88px;
  left: 15px;
}
#leg-left {
  animation-delay: 333ms;
  left: 25px;
  z-index: -1;
}