Página 404 Oveja animada

Las animaciones web modernas ya no requieren de JavaScript para lograr efectos sorprendentes. En este tutorial, te mostraremos cómo se puede crear una divertida oveja animada usando únicamente HTML y CSS. Esta técnica es ideal para aprender a usar @keyframes, pseudo-elementos y propiedades CSS avanzadas.

🧩 Estructura del HTML

El código HTML es minimalista, pero bien estructurado. Utiliza un contenedor principal que alberga tres partes:

				
					<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Oveja Animada by BitNauta</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="four left"></div>
    <div class="sheep-container">
      <div class="sheep">
        <div class="head">
          <div class="ear"></div>
          <div class="ear"></div>
          <div class="eye"></div>
          <div class="eye"></div>
        </div>
      </div>
    </div>
    <div class="four right"></div> 
  </div>
</body>
</html>

El número “404” se representa con dos elementos .four a los lados.
En el centro, se encuentra la oveja, dividida en cuerpo (.sheep) y cabeza (.head), con ojos y orejas animadas.

🎨 Diseño visual con CSS

El estilo está basado en un sistema de variables CSS, lo cual permite adaptar el diseño a diferentes tamaños de pantalla con min(25vw, 25vh).

📌 Variables globales

				
					:root {
  --size: min(25vw, 25vh);
  --b-bg: #d0d2ca; /* color del cuerpo */
  --c-bg: #585858; /* color de la cabeza y ojos */
}

🎯 Estilos base y layout

El contenedor principal es el corazón del diseño. Aquí está su código:

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

El body está centrado y ocupa toda la altura de la pantalla. Esto permite que la oveja siempre se vea en el centro del viewport.

🐑 Anatomía de la oveja

✅ Cuerpo

				
					.sheep {
  background: var(--b-bg);
  border-radius: 50%;
}

Se usa border-radius: 50% para crear un cuerpo circular. También se agregan sombras con box-shadow y pseudo-elementos para representar la lana.o.

✅ Cabeza

				
					.head {
  animation: headMove 5s infinite;
}

La cabeza tiene una animación cíclica que la mueve de lado a lado, generando un efecto simpático y realista.

✅ Ojos y orejas

Cada ojo tiene un pseudo-elemento ::before que simula la pupila, y se le aplica una animación para que parezca que se mueve de forma natural.

				
					@keyframes eyeMovement {
  25% { transform: translate(-50%, 0.05em) rotate(45deg); }
}

Las orejas, a su vez, también se animan por separado con rotaciones suaves:

				
					@keyframes rightEarMove { ... }
@keyframes leftEarMove { ... }

🎞️ Animaciones clave con `@keyframes`

CSS permite animar elementos con facilidad usando @keyframes. Este proyecto incluye varias animaciones sincronizadas:

headMove: movimiento de la cabeza.
eyeMovement: rotación de las pupilas.
eyeShade: parpadeo de ojos.
rightEarMove y leftEarMove: movimientos suaves de orejas.

Este proyecto de muestra cómo el CSS avanzado puede transformar un diseño simple en una experiencia visualmente impactante. Desde animaciones dinámicas hasta formas creativas, cada línea de código tiene un propósito específico que contribuye al resultado final.
BitNauta, Mayo 2025.