Example
Hover over the image to see the animation effect.
Web development courses to make an interactive and responsive website.
The emoji should be used to check the feedback of a user for the website. These emojis represent the emotions of a user for your website.
Hover over the image to see the animation effect.
Define a class .smiling-face for the face.
<style>
.smiling-face{
width:200px;
height:200px;
background-color:yellow;
border-radius:50%;
position:relative;
}
</style>
Try </>
position:relative; is necessary to position the descendent elements relative to this element.
Tip: Remember that the percentage values of length of the child elements are calculated with respect to the parent element.
Now define a class .left-eye for the left-eye. It is a child of the .face class element.
<style>
.left-eye{
width:23%;
height:20%;
background-color:rgb(240,240,240);
border-radius:45%;
position:absolute;
left:20%;
top:20%;
}
</style>
Try </>
position:absolute; property defines position of the left-eye (using left and top properties).
The width should be greater than height.
23% of width and 20% of height are the percentage values with respect to the parent element (.face).
45% value converts the rectangular shape into a elliptical shape
The dimesions of the left-eye should be the same as right-eye. Define .right-eye class for the right-eye. It is also a child of the .smiling-face class element.
<style>
.right-eye{
right:20%;
top:20%;
}
</style>
Try </>
The properties of the right-eye are the same as left-eye. But there is only one difference. The left property should be replaced by the right property.
.left-pupil class name is specified for the left-pupil. Now, it is a child of the left-eye.
<style>
.left-pupil{
width:48%;
height:45%;
background-color:rgb(100,100,100);
border-radius:50%;
position:absolute;
top:55%; /* 55 = 100 (total) - 45 (height) */
left:26%; /* 26 = 50 (half of total) - 24 (half of width) */
}
</style>
Try </>
55% value represents the distance between the top side of the left-pupil and and top side of the left-eye.
26% value represents the distance between the left side of the left-pupil and and left side of the left-eye.
width is greater than height to make it elliptical.
.right-pupil class name is specified for the right-pupil. It has the same properties as the .left-pupil class has. But it is a child of the .right-eye element.
.lip class element represents lip of the emoji. It is a child of the .smiling-face class element.
<style>
.lip{
width:62.5%;
height:25%;
background-color:yellow;
border-radius:50%;
border:solid red;
border-width:1px 0px 0px 0px;
transform:rotateZ(0deg);
position:absolute;
left:18.75%; /* 18.75 = (100-62.5)/2 */
top:45%;
}
</style>
Try </>
position:absolute; property must be present to align it at the center.
When a user hovers the mouse over the emoji, the emoji should present a smiling view. The following properties should be changed.
<style>
.smiling-face:hover .lip{
transition-timing-function:ease-in;
transition:transform 0s;
transition-delay:2s;
transform:rotateZ(180deg);
}
</style>
Try </>
When a user hovers the mouse over the .smiling-face class element, the .lip class element changes its properties.
Similarly, the properties of .left-pupil and .right-pupil are changed.
<style>
.smiling-face:hover .left-pupil, .smiling-face:hover .right-pupil{
transition-property:top,width,height;
transition-duration:1s,1s,1s;
transition-delay:0s,1s,1s;
top:27.5%;
width:46%;
height:43%;
}
</style>
Try </>
Same is the case with the .right-pupil element.
Was this article helpful?
Email:
Message: