<div id="all">
<div id="body"></div>
<div id="head"></div>
<div id="eye"></div>
<div id="othereye"></div>
<div id="pupil"></div>
<div id="otherpupil"></div>
<div id="hat"></div>
<div id="arm"></div>
<div id="otherarm"></div>
<div id="leg"></div>
<div id="leggg"></div>
<div id="foot"></div>
<div id="foottt"></div>
<div id="morehat"></div>
<div id="what"></div>
<div id="dkf"></div>
<div id="sdjvb"></div>
<div id="ifsf"></div>
</div>








#head{
  height:100px;
  width:100px;
  background:green;
  border-radius:50%;
  position:absolute;
  left:500px;
  top:30px;
  
}
#eye{
  height:50px;
  width:30px;
  background:white;
  border-radius:50%;
  position:absolute;
  left:560px;
  top:50px;
  
}

#othereye{
  height:50px;
  width:30px;
  background:white;
  border-radius:50%;
  position:absolute;
  left:514px;
  top:50px;
  
}
#pupil{
  height:20px;
  width:20px;
  background:black;
  border-radius:50%;
  position:absolute;
  left:565px;
  top:74px;
  
}
#otherpupil{
  height:20px;
  width:20px;
  background:black;
  border-radius:50%;
  position:absolute;
  left:519px;
  top:74px;
  
}

#hat{
  height:70px;
  width:30px;
  background:yellow;
  border-radius:50%;
  position:absolute;
  left:510px;
  top:10px;
  transform:rotate(60deg); 
}
#body{
 height:200px;
  width:100px;
  background:green;
  border-radius:50%;
  position:absolute;
  left:500px;
  top:100px; 
}
#arm{
 height:100px;
  width:5px;
  background:green;
  border-radius:50%;
  position:absolute;
  left:500px;
  top:100px; 
  transform:rotate(60deg);
}
#otherarm{
 height:100px;
  width:5px;
  background:green;
  border-radius:50%;
  position:absolute;
  left:594px;
  top:100px; 
  transform:rotate(130deg);
}
#leg{
 height:100px;
  width:10px;
  background:green;
  border-radius:50%;
  position:absolute;
  left:570px;
  top:230px; 

}
#leggg{
 height:100px;
  width:10px;
  background:green;
  border-radius:50%;
  position:absolute;
  left:520px;
  top:230px; 

}
#foot{
 height:40px;
  width:100px;
  background:yellow;
  border-radius:50%;
  position:absolute;
  left:550px;
  top:300px; 

}
#foottt{
 height:40px;
  width:100px;
  background:yellow;
  border-radius:50%;
  position:absolute;
  left:450px;
  top:300px; 

}
#morehat{
 height:5px;
  width:20px;
  background:yellow;
  position:absolute;
  left:505px;
  top:35px; 
  transform:rotate(60deg);

}
#what{
 height:150px;
  width:50px;
  background:pink;
  position:absolute;
  border-radius:50%;
  left:524px;
  top:130px; 
}
#dkf{
 height:10px;
  width:20px;
  background:pink;
  position:absolute;
  border-radius:50%;
  left:540px;
  top:100px; 
}

#sdjvb{
 height:5px;
  width:5px;
  background:black;
  position:absolute;
  border-radius:50%;
  left:543px;
  top:102px; 
}

#ifsf{
 height:5px;
  width:5px;
  background:black;
  position:absolute;
  border-radius:50%;
  left:552px;
  top:102px; 
}

#all{
  animation: jump 1s alternate infinite;
  position:absolute;
  position:absolute;
  left:-400px;
}

@keyframes jump{
  From{
    top:-50px;
    
  }
  To{
    top:50px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.