CodePen Embed - Jirafa

<div class="contenedor">
<div class="jirafa">
  <div class="cuello"></div>
  <div class="cabeza">
    <div class="cuer"></div>
    <div class="cuer3"></div>
  <div class="cabeza3"></div>
    <div class="lengua"></div>
    <div class="boca"></div>
  <div class="ojo"></div>
  </div>
  <div class="legs3"></div>
  <div class="body">
  <div class="legs"></div>
    <div class="cola"></div>
    <div class="circs">
      <span class="circ1"></span>
      <span class="circ2"></span>
      <span class="circ3"></span>
      <span class="circ4"></span>
      <span class="circ5"></span>
      <span class="circ6"></span>
      <span class="circ7"></span>
    </div>
  </div>
  <div class="arbol">
  
  </div>
  <div class="hojas"></div>
  </div>


</div>

body{
  background:black;
}

.contenedor{
  position:relative;
  width:900px;
  height:900px;
  border-radius:100%;
  background:#cc9966;
  margin:90px auto;
}
.jirafa{
  position:absolute;
  margin: 90px 212px
}
.cuello{
  position:absolute;
  border-bottom: 251px solid #ffcc33;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  height: 0;
  width: 30px;
  margin:152px 271px;
}

.cabeza{
  position:absolute;
  width:90px;
  height:90px;
  border-radius:100%;
  background:#ffcc33;
  margin:93px 241px;
  animation:eat 3s alternate infinite;
  -moz-animation:eat 3s alternate infinite;
  -webkit-animation:eat 3s alternate infinite;
}
.cabeza::before{
  content:"";
  display:block;
  width:21px;
  height:50px;
  border-radius:100%;
  background:#ffff99;
  border-top:3px solid #663300;
  border-bottom:3px solid #663300;
  border-left:9px solid #663300;
  border-right:3px solid #663300;
  transform:rotate(45deg); 
  -moz-transform:rotate(45deg); 
  -webkit-transform:rotate(45deg);
  margin: -12px 65px
}
.cabeza3{
  position:absolute;
  width:63px;
   border-bottom: 70px solid #ffcc33;;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 21px;
  transform:rotate(-121deg); 
  -moz-transform:rotate(-121deg); 
  -webkit-transform:rotate(-121deg);
  margin: 3px -40px
}
.boca{
  position:absolute;
  width:30px;
  height:16px;
  border-radius:30px 30px 0 0;
  background:#663300;
  transform:rotate(-121deg); 
  -moz-transform:rotate(-121deg); 
  -webkit-transform:rotate(-121deg);
  margin:45px -45px
}
.cuer{
  position:absolute;
  width:16px;
  height:30px;
 background:#ffcc33;
  margin:-53px 40px;
  transform:rotate(21deg); 
  -moz-transform:rotate(21deg); 
  -webkit-transform:rotate(21deg);
}
.cuer::before{
  content:"";
  display:block;
  width:30px;
  height:30px;
  border-radius:100%;
  background:#ffcc33;
  margin:-21px -7px
}


.cuer3{
  position:absolute;
  width:16px;
  height:30px;
 background:#ffcc33;
  margin:-53px 14px;
  transform:rotate(-12deg); 
  -moz-transform:rotate(-12deg); 
  -webkit-transform:rotate(-12deg);
}
.cuer3::before{
  content:"";
  display:block;
  width:30px;
  height:30px;
  border-radius:100%;
  background:#ffcc33;
  margin:-21px -7px
}
.body{
  position:absolute;
  width:221px;
  height:132px;
  border-radius:0 500px 500px 500px;
  background:#ffcc33;
  margin: 355px 269px;
  transform:rotate(21deg); 
  -moz-transform:rotate(21deg); 
  -webkit-transform:rotate(21deg);
}
.legs{
  position:absolute;
  width:35px;
  height:172px;
  background:#ffcc33;
  margin:90px 65px;
  border-bottom:21px solid #663300;
  transform:rotate(-21deg); 
  -moz-transform:rotate(-21deg); 
  -webkit-transform:rotate(-21deg);
}
.legs::before{
  content:"";
  position:absolute;
  width:35px;
  height:172px;
  background:#ffcc33;
  margin:0px 157px;
  border-bottom:21px solid #663300;
  transform:rotate(-12deg); 
  -moz-transform:rotate(-12deg); 
  -webkit-transform:rotate(-12deg);
}
.legs3{
  position:absolute;
  width:35px;
  height:172px;
  background:#ffcc33;
  margin:421px 261px;
  border-bottom:21px solid #663300;
  transform:rotate(21deg); 
  -moz-transform:rotate(21deg); 
  -webkit-transform:rotate(21deg);
}
.legs3::before{
  content:"";
  position:absolute;
  width:35px;
  height:172px;
  background:#ffcc33;
  margin:-40px 125px;
  border-bottom:21px solid #663300;
}
.cola{
  position:absolute;
  width:60px;
  height:172px;
  border-radius:90px 70px 30px 0;
  
  border-right:21px solid #ffcc33;
 
  margin:0px 162px;
  transform:rotate(-35deg); 
  -moz-transform:rotate(-35deg); 
  -webkit-transform:rotate(-35deg);
}
.cola::before{
  content:"";
  display:block;
  width:30px;
  height:35px;
  border-radius:0 300px;
  background:#663300;
  margin: 145px 55px;
   transform:rotate(35deg); 
  -moz-transform:rotate(35deg); 
  -webkit-transform:rotate(35deg);
}
.ojo{
  position:absolute;
  width:21px;
  height:21px;
  border-radius:100%;
  background:black;
  margin: 0 12px;
}
.ojo::before{
  content:"";
  display:block;
  width:9px;
  height:9px;
  border-radius:100%;
  background:white;
  margin:3px 3px;
  
}

.circ1{
  position:absolute;
  width:30px;
  height:16px;
  border-radius:30px 30px 0 0;
  background:#663300;
  margin:-90px -30px;
  
}
.circ1::before{
  content:"";
  display:block;
  width:60px;
  height:30px;
  border-radius:60px 60px 0 0;
  background:#663300;
  
   transform:rotate(75deg); 
  -moz-transform:rotate(75deg); 
  -webkit-transform:rotate(75deg);
  margin: 35px -18px
}
.circ1::after{
  content:"";
  display:block;
  width:50px;
  height:30px;
  border-radius:60px 60px 0 0;
  background:#663300;
    transform:rotate(-112deg); 
  -moz-transform:rotate(-112deg); 
  -webkit-transform:rotate(-112deg);
  margin: 35px 38px
}
.circ2{
  position:absolute;
  width:30px;
  height:16px;
  border-radius:30px 30px 0 0;
  background:#663300;
  margin:50px 0px;
  
}
.circ2::before{
  content:"";
  display:block;
  width:60px;
  height:30px;
  border-radius:60px 60px 0 0;
  background:#663300;
     transform:rotate(-90deg); 
  -moz-transform:rotate(-90deg); 
  -webkit-transform:rotate(-90deg);
  margin: 33px 30px
}
.circ2::after{
  content:"";
  display:block;
  width:50px;
  height:30px;
  border-radius:60px 60px 0 0;
  background:#663300;
  margin: -132px 142px
}

.circ3{
  position:absolute;
  width:40px;
  height:30px;
  border-radius:100%;
  background:#663300;
  margin:70px 90px;
  
}
.circ3::before{
  content:"";
  display:block;
  width:60px;
  height:40px;
  border-radius:100%;
  background:#663300;
  margin: -53px -21px
}
.circ3::after{
  content:"";
  display:block;
  width:30px;
  height:16px;
  border-radius:60px 60px 0 0;
  background:#663300;
  margin: 132px -63px;
   transform:rotate(90deg); 
  -moz-transform:rotate(90deg); 
  -webkit-transform:rotate(90deg);
}
.circ4{
  position:absolute;
  width:40px;
  height:21px;
  border-radius:40px 40px 0 0;
  background:#663300;
  margin:112px 112px;
  
}
.circ4::before{
  content:"";
  display:block;
  width:35px;
  height:30px;
  border-radius:100%;
  background:#663300;
  margin: -43px 45px
}
.circ4::after{
  content:"";
  display:block;
  width:30px;
  height:16px;
  border-radius:60px 60px 0 0;
  background:#663300;
  margin: 60px 40px;
   transform:rotate(90deg); 
  -moz-transform:rotate(90deg); 
  -webkit-transform:rotate(90deg);
}
.circ5{
  position:absolute;
  width:40px;
  height:21px;
  border-radius:40px 40px 0 0;
  background:#663300;
  margin:172px 162px;
  transform:rotate(-90deg); 
  -moz-transform:rotate(-90deg); 
  -webkit-transform:rotate(-90deg);
}
.circ5::before{
  content:"";
  display:block;
  width:30px;
  height:16px;
  border-radius:30px 30px 0 0;
  background:#663300;
  margin: 65px 50px;
  transform:rotate(-35deg); 
  -moz-transform:rotate(-35deg); 
  -webkit-transform:rotate(-35deg);
}
.circ5::after{
  content:"";
  display:block;
  width:40px;
  height:21px;
  border-radius:0 0 40px 40px;
  background:#663300;
  margin: -80px 12px;
   transform:rotate(-35deg); 
  -moz-transform:rotate(-35deg); 
  -webkit-transform:rotate(-35deg);
}
.circ6{
  position:absolute;
  width:40px;
  height:21px;
  border-radius:40px 40px 0 0;
  background:#663300;
  margin:212px 37px;
  transform:rotate(-90deg); 
  -moz-transform:rotate(-90deg); 
  -webkit-transform:rotate(-90deg);
}
.circ6::before{
  content:"";
  display:block;
  width:30px;
  height:16px;
  border-radius:30px 30px 0 0;
  background:#663300;
  margin: 33px 50px;
  transform:rotate(-21deg); 
  -moz-transform:rotate(-21deg); 
  -webkit-transform:rotate(-21deg);
}
.circ6::after{
  content:"";
  display:block;
  width:40px;
  height:21px;
  border-radius:0 0 40px 40px;
  background:#663300;
  margin: -50px 0px;
   transform:rotate(-21deg); 
  -moz-transform:rotate(-21deg); 
  -webkit-transform:rotate(-21deg);
}
.circ7{
  position:absolute;
  width:30px;
  height:16px;
  border-radius:40px 40px 0 0;
  background:#663300;
  margin:-112px -60px;
  transform:rotate(75deg); 
  -moz-transform:rotate(75deg); 
  -webkit-transform:rotate(75deg);
}
.circ7::before{
  content:"";
  display:block;
  width:30px;
  height:16px;
  border-radius:0 0 30px 30px;
  background:#663300;
  margin: -19px -21px;
  transform:rotate(-12deg); 
  -moz-transform:rotate(-12deg); 
  -webkit-transform:rotate(-12deg);
}
.circ6::after{
  content:"";
  display:block;
  width:40px;
  height:21px;
  border-radius:0 0 40px 40px;
  background:#663300;
  margin: -50px 0px;
   transform:rotate(-21deg); 
  -moz-transform:rotate(-21deg); 
  -webkit-transform:rotate(-21deg);
}
.arbol{
  position:absolute;
  width:121px;
  height:600px;
  background:#993300;
  margin:30px -30px
}
.arbol::before{
  content:"";
  display:block;
  width:21px;
  height:231px;
  background:#993300;
  transform:rotate(45deg); 
  -moz-transform:rotate(45deg); 
  -webkit-transform:rotate(45deg);
  margin:-60px 152px
}
.arbol::after{
  content:"";
  display:block;
  width:21px;
  height:121px;
  background:#993300;
  transform:rotate(45deg); 
  -moz-transform:rotate(45deg); 
  -webkit-transform:rotate(-45deg);
  margin:0px -40px
}
.hojas{
  position:absolute;
  width:30px;
  height:35px;
  border-radius:0 300px;;
  background:green;
  margin: 50px 172px
}
.hojas::before{
  content:"";
  display:block;
  width:30px;
  height:35px;
  border-radius:0 300px;;
  background:green;
  margin: 3px -14px;
 transform:rotate(45deg); 
  -moz-transform:rotate(45deg); 
  -webkit-transform:rotate(45deg);
}

.hojas::after{
  content:"";
  position:absolute;
  width:30px;
  height:35px;
  border-radius:0 300px;;
  background:#009900;
  margin: -50px 7px;
 transform:rotate(-21deg); 
  -moz-transform:rotate(-21deg); 
  -webkit-transform:rotate(-21deg);
}
.lengua{
  position:absolute;
  width:12px;
  height:16px;
  border-radius:0 0 12px 12px;
  background:#ff6666;
  margin: 43px -37px;
  transform:rotate(55deg); 
  -moz-transform:rotate(55deg); 
  -webkit-transform:rotate(55deg);
  animation:eat3 3s alternate infinite;
  -moz-animation:eat3 3s alternate infinite;
  -webkit-animation:eat3 3s alternate infinite;
  
}

@keyframes eat{
  0%{
    transform:rotate(0deg); 
  -moz-transform:rotate(0deg); 
  -webkit-transform:rotate(0deg);
    
  }
  100%{
    transform:rotate(65deg); 
  -moz-transform:rotate(65deg); 
  -webkit-transform:rotate(65deg);
  }
}

@-moz-keyframes eat{
  0%{
    transform:rotate(0deg); 
  -moz-transform:rotate(0deg); 
  -webkit-transform:rotate(0deg);
    
  }
  100%{
  transform:rotate(65deg); 
  -moz-transform:rotate(65deg); 
  -webkit-transform:rotate(65deg);
  }
}

@-webkit-keyframes eat{
  0%{
    transform:rotate(0deg); 
  -moz-transform:rotate(0deg); 
  -webkit-transform:rotate(0deg);
    
  }
  100%{
   transform:rotate(65deg); 
  -moz-transform:rotate(65deg); 
  -webkit-transform:rotate(65deg);
  }
}

@keyframes eat3{
  0%{ margin:43px -37px; }
  100%{margin:53px -47px;}
}

@-moz-keyframes eat3{
  0%{ margin:43px -37px; }
  100%{margin:53px -47px;}
}

@-webkit-keyframes eat3{
  0%{ margin:43px -37px; }
  100%{margin:53px -47px;}
}

This Pen is owned by Judith Neumann on CodePen.

See more by @judag on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.