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.

    Approach: The basic of this animation comes from some CSS attribute and HTML tags. Here, we will make a face which will show like wow.

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  • 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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 par 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>

    chevron_right

    
    

    Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.