Emoji WOW de Facebook usando HTML y CSS

Posted on by Rudeus Greyrat

Esta animación nos es muy conocida. Cuando usamos Facebook, hay una reacción llamada WOW. Entonces, en este artículo, hicimos esa reacción usando HTML y CSS simples. Además, es uno de los mejores ejemplos para aprender el concepto de pseudo-elementos.

    Enfoque: lo básico de esta animación proviene de algunos atributos CSS y etiquetas HTML. Aquí, haremos una cara que se mostrará como wow.

  • Parte HTML: al usar HTML, crearemos alguna clase ya que podemos modificar los div a una cara. Tomaremos algunos div y clases para modificar esa parte usando CSS. La idea principal es que tomaremos algunas áreas de la parte del cuerpo y las modificaremos con CSS.

    Esta es la parte del cuerpo:

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

  • Código CSS: al usar CSS, haremos que la cara sea una ceja y una boca. Primero, modificaremos el área para hacer un círculo. Después de hacer la cara, le daremos vida usando efectos de desplazamiento de CSS como @keyeffect, que ayudará a mover la ceja y la boca a lo largo de un ángulo particular del eje X o el eje Y.

    Ejemplo: Aquí está el código completo

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

    Producción:

Publicación traducida automáticamente

Artículo escrito por chalti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *