Facebook WOW emoji using HTML and CSS

Last Updated : 09 Aug, 2022

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:

html

<div class="center">
    <div class="emoji">
        <div class="emoji_face">
            <div class="emoji_brow"></div>
            <div class="emoji_eye"></div>
            <div class="emoji_mouth"></div>
        </div>
    </div>
</div>

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

css

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8" />
        <title>Wow Facebook Reaction</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                background: #e5daf3;
            }
            .center {
                /*here the position of the 
              emoji will defined*/
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            /*here we will make the shape of the emoji*/
            .emoji {
                position: relative;
                display: inline-block;
                height: 120px;
                width: 120px;
                border-radius: 50%;
                box-shadow: inset 0 0 10px 2px #eead2b;
                background: linear-gradient(#ffed65, #eead2f);
            }
            .emoji_face,
            .emoji_brow,
            .emoji_eye,
            .emoji_mouth {
                position: absolute;
            }
            .emoji_face {
                height: 120px;
                width: 120px;
                animation: face 3s linear infinite;
            }
            /*here by adding @Keyframes we can 
          move the face along X-axis*/
            @keyframes face {
                15%,
                25% {
                  transform: rotate(20deg) translateX(-20px);
                }
                45%,
                65% {
                  transform: rotate(-20deg) translateX(20px);
                }
                75%,
                100% {
                    transform: rotate(0) translateX(0);
                }
            }
            /*here the eye brow making part starts*/
            .emoji_brow {
                left: calc(50% - 3px);
                height: 6px;
                width: 6px;
                background: transparent;
                border-radius: 50%;
                box-shadow:
                  -18px 0 0 0 #aa7408, -33px 0 0 0 #aa7408,
                  18px 0 0 0 #aa7408, 33px 0 0 0 #aa7408;
                animation: eye_brow 3s linear infinite;
            }
            /*here we can move the eye brow part*/
            @keyframes eye_brow {
                15%,
                65% {
                    top: 25px;
                }
                75%,
                100%,
                0% {
                    top: 15px;
                }
            }
            .emoji_brow:before,
            .emoji_brow:after {
                position: absolute;
                content: "";
                left: calc(50% - 12px);
                top: -3px;
                width: 24px;
                height: 20px;
                border: 6px solid #aa7408;
                border-radius: 50%;
                box-sizing: border-box;
                border-bottom-color: transparent;
                border-left-color: transparent;
                border-right-color: transparent;
            }
            /*after movement the face will 
          look like this*/
            .emoji_brow:before {
                margin-left: -25px;
            }
            .emoji_brow:after {
                margin-left: 25px;
            }
            /*eye part will defined in this part*/
            .emoji_eye {
                top: 35px;
                left: calc(50% - 8px);
                height: 24px;
                width: 16px;
                border-radius: 50%;
                background: transparent;
                box-shadow: 25px 0 0 0 #1b2031, 
                  -25px 0 0 0 #1b2031;
            }
            /*mouth will be designed here*/
            .emoji_mouth {
                top: 50%;
                left: calc(50% - 15px);
                width: 30px;
                height: 40px;
                border-radius: 50%;
                background: 
                  linear-gradient(#54290f, #622b0b, #6e3011);
                animation: mouth 3s linear infinite;
            }
            /*movement of the mouce will be designed here*/
            @keyframes mouth {
                10%,
                30% {
                    width: 20px;
                    height: 20px;
                    left: calc(50% - 10px);
                }
                50%,
                70% {
                    width: 30px;
                    height: 40px;
                    left: calc(50% - 15px);
                }
                75%,
                100% {
                    height: 45px;
                }
            }
        </style>
    </head>
    <body>
        <!-- In this part we will make some div to
 take some different part of area on body part
          and give the div some class-->
        <div class="center">
            <div class="emoji">
                <div class="emoji_face">
                    <div class="emoji_brow"></div>
                    <div class="emoji_eye"></div>
                    <div class="emoji_mouth"></div>
                </div>
            </div>
        </div>
    </body>
</html>

Facebook WOW emoji using HTML and CSS

html

css

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?