HTML Explanation
01
The div element with the class face represents the circular face.
02
Inside this, there is another div with the class eyes, which contains two eye elements. Each eye will be styled and animated to follow the mouse movement.
CSS Explanation
01
The body is styled to center the face vertically and horizontally on the screen with a background color.
02
The .face class styles the face as a yellow circle using border-radius: 50% and centers the eyes within it.
03
The mouth is created using the ::before pseudo-element, giving it a semi-circle shape initially and transforming it into a straight line when the face is hovered over, simulating a smiling and neutral expression.
04
The .eyes class positions the eyes slightly above the center of the face.
05
Each .eye is styled as a white circle with a black pupil (::before pseudo-element).
06
The CSS handles the basic layout and hover effect for the mouth.
Javascript Explanation
01
An event listener is attached to the mousemove event on the body.
02
The eyeball function calculates the center position of each eye and the angle between the cursor and the eye.
03
This angle is then used to rotate each eye in the direction of the cursor.
04
The rotation is achieved by dynamically setting the transform: rotate() property on each eye, making them appear as though they are tracking the cursor's movement.