<div class="face">
                <div id="eye1">
                    <div id="pupil1">  <div id="pupil2"></div>
                     <div id="eyelight1"></div> <div id="eyelight2"></div>
            </div>
                      </div>
                <div id="eye2">
                    <div id="pupil3">
                        <div id="pupil4"></div>
                         <div id="eyelight3"></div> <div id="eyelight4"></div>
            
                    </div>
                </div>
                <div class="face-nose" ><div id="noselight1"></div></div>
          
                <div class="face-lip"></div>
            </div>
*{
	border: 0;
	padding: 0;
	box-sizing: border-box;
}

  .face{
    position: absolute;
    width: 300px;
    height: 300px;
    left: 10%;
    top: 3%;
    border-radius: 5%;
    box-shadow: inset 0 0 5px rgb(17, 68, 68);
    background: rgb(247, 214, 247);
    border-radius: 50%;
    animation: face 2s infinite;
  }
  .face-lip{
    position: absolute;
    height: 50%;
    height: 50%;
    width: 60%;
    left: 20%;
    top: 40%;
    border-bottom: 2px solid rgb(190, 9, 109);
    border-radius: 100%;
  }
  .face-nose{
    position: absolute;
    height: 20%;
    width: 20%;
    left: 40%;
    top: 54%;
    background-color: rgb(190, 9, 109);
    border-radius: 100%;
  
  }
#rabbit{
	position: absolute;
	width: 15%;
	height: 8%;
	left: 17%;
	top: 3%;
	  z-index: 30;
	 animation: face 2s infinite 1s ;
	 }

#head{
	width: 100%;
	height: 100%;
	background: rgb(247, 214, 247);
	border-radius: 50%;
   	left: 0;
   	top: 0;
    position: absolute;
   box-shadow: inset 0px 0px 5px #3d0327,0px 0px 5px #4e0328 ;
   }


   
#eye1
{
	width: 30%;
	height: 30%;
	border-radius: 50%;
	background-color: white;
    left: 15%;
    top: 30%;
	border:1px ridge#f700ff;
	position: absolute;
	  transform: rotate(-20deg);
      animation-iteration-count: infinite;
    animation-name: eye;
    animation-duration: 5s;
   
}
#pupil1{
width: 80%;
	height: 80%;
	border-radius: 50%;
	background-color: rgb(190, 9, 109);
	left: 20%;
	top: 20%;
	position: absolute;
	   animation-iteration-count: infinite;
    animation-name: pupil;
    animation-duration: 5s;
   
}
#pupil2{
width: 90%;
	height: 90%;
	border-radius: 50%;
	background-color: rgb(190, 9, 109);
	margin-left: 10%;
	margin-top: 10%;
	position: absolute;
}
#eyelight1{
	width: 20%;
	height: 20%;
	background-color: white;
	position: absolute;
	margin-left: 20%;
	margin-top: 10%;
	border-radius: 50%;
}

#eyelight2{
	width: 15%;
	height: 15%;
	background-color: white;
	position: absolute;
	margin-left: 40%;
	margin-top: 60%;
	border-radius: 50%;
}

#eye2
{
	width: 30%;
	height: 30%;
	border-radius: 50%;
	background-color: white;
    left: 55%;
    top: 30%;
	border:1px ridge#f700ff;
	position: absolute;
	  transform: rotate(20deg);
     animation-iteration-count: infinite;
    animation-name: eye;
    animation-duration: 5s;

}
#pupil3{
width: 80%;
	height: 80%;
	border-radius: 50%;
	background-color:rgb(190, 9, 109);
	left: 0%;
	top: 20%;
		position: absolute;
	   animation-iteration-count: infinite;
    animation-name: pupil;
    animation-duration: 5s;
   
}
#pupil4{
width: 90%;
	height: 90%;
	border-radius: 50%;
	background-color: rgb(190, 9, 109);
	margin-top: 10%;
	position: absolute;
}
#eyelight3{
	width: 20%;
	height: 20%;
	background-color: white;
	position: absolute;
	margin-left: 65%;
	margin-top: 10%;
	border-radius: 50%;
}

#eyelight4{
	width: 15%;
	height: 15%;
	background-color: white;
	position: absolute;
	margin-left: 40%;
	margin-top: 60%;
	border-radius: 50%;
}

#nosecover{
	width: 60%;
	height:50%;
	top: 45%;
	left: 20%;
	position: absolute;
	box-shadow: 0 0 3px grey,inset 0 0 3px grey;
	background-color: rgb(250, 160, 223);
		border-radius: 50%;

}
#nose{
	width: 40%;
	height:30%;
	margin-top: 1%;
	margin-left: 30%;
	position: absolute;
	/* border:0.3px ridge grey; */
	background-color: rgb(190, 9, 109);
	border-radius: 50%;
    z-index: 3;
}
#noselight1{
	width: 10%;
	height:20%;
	margin-top: 10%;
	margin-left: 60%;
	position: absolute;
	background-color: white;
		border-radius: 50%;
	width: 10%;
	height:20%;
	margin-top: 10%;
	margin-left: 60%;
	position: absolute;
	background-color: white;
		border-radius: 50%;
		box-shadow: 0 0 2px #ddd;
    
}
#mouth{
	width: 35%;
	height:50%;
	margin-top: 10%;
	margin-left: 50%;
	position: absolute;
	background-color: rgb(245, 179, 225);
	border-radius: 30%;
		border-left: 0.3px ridge rgb(190, 9, 109);
   
	border-bottom: 0.3px ridge rgb(190, 9, 109);
	z-index: 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.