practice css_emoji

<!DOCTYPE html>
<html>
<head>
<style>

.smiling-face{
 width:200px;
 height:200px;
 background-color:yellow;
 border-radius:50%;
 position:relative;
}
.left-eye{
 width:23%;
 height:20%;
 border-radius:45%;
 background-color:rgb(240,240,240);
 position:absolute;
 left:20%;
 top:20%;
}
.right-eye{
 width:23%;
 height:20%;
 border-radius:45%;
 background-color:rgb(240,240,240);
 position:absolute;
 right:20%;
 top:20%;
}
.left-pupil,.right-pupil{
 width:48%;
 height:45%;
 border-radius:50%;
 background-color:rgb(100,100,100);
 position:absolute;
 top:55%; /* 55 = 100 (total) - 45 (height) */
 left:26%; /* 26 = 50 (half of total) - 24 (half of width)   */
}
.lip{
 width:62.5%;
 height:25%;
 background-color:yellow;
 border-radius:50%;
 position:absolute;
 left:18.75%; /* 18.75 = (100-62.5)/2  */
 top:45%;  
 border:solid red;
 border-width:1px 0px 0px 0px;
 transform:rotateZ(0deg);
 -webkit-transform:rotateZ(0deg); /*for safari */
}

.smiling-face:hover .lip{
 transition-timing-function:ease-in;
 transition:transform 0s;
 transition-delay:2s; 
 transform:rotateZ(180deg);
 -webkit-transition-timing-function:ease-in; /* for safari  */ 
 -webkit-transition:transform 0s; /*for safari  */  
 -webkit-transition-delay:2s;  /*for safari */ 
 -webkit-transform:rotateZ(180deg); /* for safari */
}

.smiling-face:hover .left-pupil, .smiling-face:hover .right-pupil{
transition-property:top,width,height;
transition-duration:1s,0s,0s;
transition-delay:0s,1s,1s;
-webkit-transition-property:top,width,height; /* for safari */
-webkit-transition-duration:1s,0s,0s; /* for safari */
-webkit-transition-delay:0s,1s,1s;  /* for safari */
top:27.5%;
width:46%;
height:43%;
}
</style>
</head>
<body>
  
<div class="smiling-face">
 
 <span class="left-eye">
   <span class="left-pupil">
   </span>
 </span>
 
 <span class="right-eye">
   <span class="right-pupil">
   </span>
 </span>
 <span class="lip">
 </span>
</div>

</body>
</html>

Share