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:
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> |
- Output:
Please Login to comment...