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
¿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.
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 clasehappy-face
que contiene dos ojos y una boca. - Los ojos son dos
div
con la claseeye
dentro de un contenedordiv
con la claseeyes
. - La boca es un
div
con la clasemouth
.
- Se crea un
- 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.
- Se centra la carita feliz en la pantalla con
- 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%.
- La regla
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!