Raaawr Dinosaur

index.html

<div class="center">
<div class="wrap">
  <div class="dino-body">
    <div class="dino-dot"></div>
  </div>
  <div class="dino-head">
    <div class="dino-eye"></div>
  </div>
  <div class="dino-neck"></div>
  <div class="dino-tail">
    <div class="dino-spike frst"></div>
    <div class="dino-spike scd"></div>
  </div> 
  <div class="dino-leg frst"></div>
  <div class="dino-leg scd"></div>
  <div class="dino-leg thd"></div>
  <div class="dino-leg frth"></div>
  <div class="dino-scale frst"></div>
  <div class="dino-scale scd"></div>
  <div class="dino-scale thd"></div>
  <div class="dino-scale frth"></div>
  <div class="dino-scale fth"></div>
</div>
</div>

raaawr-dinosaur.markdown

Raaawr Dinosaur

A Pen by Alexander Pietz on CodePen.

License.

style.css

bod{
  background: #140F2D;
}
.center {
  background: #140F2D;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  width: 100px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 108px;
  float: left;

}
.dino-body {
  width: 120px;
  height: 120px;
  background: #3F88C5;
  border-radius: 100%;
  position: absolute;
  clip: rect(0, 120px, 90px, 0px);
}
.dino-dot {
  width: 6px;
  height: 6px;
  background: #97EFE9;
  position: absolute;
  border-radius: 100%;
  left: 85px;
  top: 35px;
  z-index: 1;
}
.dino-dot:after {
  display: block;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #97EFE9;
  position: relative;
  left: 0;
  top: -15px; 
}
.dino-dot:before {
  display: block;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #97EFE9;
  position: relative;
  left: 9px;
  top: 0; 
}

.dino-head {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 0 0;
  background: #3F88C5;
  position: absolute;
  left: 73px;
  top: 140px;
  clip: rect(0, 37px, 20px, 0px);  
}
.dino-eye {
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  position: absolute;
  border-radius: 100%;
  left: 11px;
  top: 6px;
  z-index: 1;
}
.dino-eye:after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #000000;
  position: relative;
  left: 4px;
  top: 4px; 
}
.dino-neck {
  width: 42px;
  height: 40px;
  background: #3F88C5;
  border-radius: 0 0 0 100%;
  position: absolute;
  top: 158px;
  left: 81px;
}
.dino-tail {
  width: 35px;
  height: 35px;
  background: #3F88C5;
  border-radius: 0 100% 0 0;
  position: absolute;
  top: 163px;
  left: 215px;
}
.dino-spike {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #D72638;
  position: absolute;
  clip: rect(0, 20px, 7px, 0px);
  z-index: -1;
}
.dino-spike.frst { 
  left: 22px;
  top: 0px;
  transform: rotate(165deg);
}
.dino-spike.scd { 
  left: 21px;
  top: -1px;
  transform: rotate(165deg);
}
.dino-leg {
  width: 30px;
  height: 30px;
  background: #3F88C5;
  border-radius: 100%;
  position: absolute;
  transform: rotate(180deg);
  clip: rect(0, 15px, 15px, 0px);
  top: 183px;
}
.wrap:hover .dino-leg {
  animation-play-state: running;
}
@keyframes walkodd {
  50%{transform: translateX(20px) rotate(180deg);}
}
@keyframes walkeven {
  50%{transform: translateX(-20px) rotate(180deg);}
}
.dino-leg:nth-of-type(odd) {
  background: #5295CB;
  animation: walkodd 1s linear infinite;
  animation-play-state: paused;
}
.dino-leg:nth-of-type(even) {
  animation: walkeven 1s linear infinite;
  animation-play-state: paused;  
}
.dino-leg.frst{ left: 115px; }
.dino-leg.scd { left: 130px; }
.dino-leg.thd { left: 165px; }
.dino-leg.frth { left: 180px; }

.dino-scale {
  width: 25px;
  height: 25px;
  background: #D72638;
  border-radius: 0 50% 50% 50%;
  float: left;
}
.dino-scale.frst {
  position: absolute;
  left: 105px;
  top: 120px;  
  transform: rotate(-5deg);
  z-index: -1;
}
.dino-scale.scd {
  transform: rotate(25deg);
  position: absolute;
  left: 129px;
  top: 102px;
  z-index: -1;
}
.dino-scale.thd {
  transform: rotate(45deg);
  position: absolute;
  left: 159px;
  top: 96px;  
  z-index: -1;
}
.dino-scale.frth {
  transform: rotate(75deg);
  position: absolute;
  left: 189px;
  top: 105px;  
  z-index: -1;
}
.dino-scale.fth {
  transform: rotate(115deg);
  position: absolute;
  left: 210px;
  top: 125px;  
  z-index: -1;
}