Facebook WOW emoji using HTML and CSS

This animation is very known to us. When we use Facebook, there is a reaction named WOW. So in this article, we made that reaction by using simple HTML and CSS. Also, it is one of the best examples to learn the concept of pseudo-elements.

HTML part: By using HTML, we will make some class as we can modify the div's to a face. We will take some div and classes to modify that part by using CSS. The main thought is we will take some areas of the body part and modify it by CSS.

This is the body part:

CSS Code: By using CSS, we will make the face eye-brow and mouth.first, we will modify the area to circle. After making the face we will give an alive on it by using CSS hover effects like @keyeffect, which will help to move the eye-brow and the mouth along a particular angle of X-axis or Y-axis.

Example: Here is the complete code

• Output: 👁 Image