¿Cómo Hacer una Animación en CSS y HTML?: Animación de una Carita Feliz

Si te interesa el desarrollo web, probablemente te hayas preguntado si es posible hacer animaciones con CSS. La respuesta es sí, y en este artículo te mostraré cómo puedes crear una sencilla animación de una carita feliz utilizando solo HTML y CSS. Esta guía paso a paso te ayudará a comprender los conceptos básicos de las animaciones en CSS

Lets Roll Let'S Go GIFfrom Lets Roll GIFs

¿Qué es CSS y Cómo Funciona en las Animaciones?.

CSS (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de un documento HTML. CSS se utiliza para definir estilos, como colores, fuentes y diseño de página. Además, CSS permite crear animaciones que hacen que los elementos de la página web se muevan o cambien de estilo gradualmente.

Cool Website Bro Impressed GIFfrom Cool Website Bro GIFs

Paso 1: Crear la Estructura HTML

Primero, necesitamos la estructura básica de un documento HTML. En este caso, crearemos un div que representará nuestra carita feliz.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animación de Carita Feliz</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="happy-face">
        <div class="eyes">
            <div class="eye left"></div>
            <div class="eye right"></div>
        </div>
        <div class="mouth"></div>
    </div>
</body>
</html>

Paso 2: Estilizar con CSS

Ahora, vamos a agregar estilos en styles.css para crear la carita feliz y luego animarla

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.happy-face {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: yellow;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: bounce 2s infinite;
}

.eyes {
    display: flex;
    justify-content: space-between;
    width: 60%;
    position: absolute;
    top: 30%;
}

.eye {
    width: 30px;
    height: 30px;
    background-color: black;
    border-radius: 50%;
}

.mouth {
    position: absolute;
    bottom: 25%;
    width: 100px;
    height: 50px;
    border-bottom: 10px solid black;
    border-radius: 0 0 50px 50px;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

Explicación del Código

Estructura HTML:
- Se crea un div con la clase happy-face que contiene dos ojos y una boca.
- Los ojos son dos div con la clase eye dentro de un contenedor div con la clase eyes.
- La boca es un div con la clase mouth.
Estilos CSS:
- Se centra la carita feliz en la pantalla con flexbox.
- Se da forma circular a la cara, se posicionan los ojos y la boca, y se les aplica estilos de color.
- Se define una animación llamada bounce que hace que la carita feliz se mueva hacia arriba y hacia abajo.
Animación con Keyframes:
- La regla @keyframes define el movimiento de rebote de la carita feliz.
- El elemento se mueve hacia arriba al 50% del ciclo de animación y vuelve a su posición original al 100%.

Conclusión

Crear animaciones en CSS es más sencillo de lo que parece. Con unos pocos pasos, puedes agregar efectos dinámicos a tus páginas web. Esta sencilla animación de una carita feliz es un ejemplo de cómo CSS puede hacer que tu sitio web sea más atractivo e interactivo. ¡Inténtalo y experimenta con diferentes animaciones para mejorar tus habilidades de desarrollo web!

Css King GIFfrom Css GIFs

¿Qué es CSS y Cómo Funciona en las Animaciones?.

Paso 1: Crear la Estructura HTML

Paso 2: Estilizar con CSS

Explicación del Código

Conclusión

Deja un comentario Cancelar respuesta