Maquetación Web Dinámica / Animaciones CSS: de sencillas a profesionales
Reto: hero con entrada escalonada
El hero es lo primero que carga en casi cualquier landing — y su entrada
es la primera impresión de TODO el sitio. Este reto junta el módulo
entero en 40 minutos: keyframes, stagger con variables, backwards,
regla de oro y la estructura opt-in de la lección de empatía. Es,
literalmente, lo que le harás a la landing de tu próximo cliente.
Reto
El hero que se presenta
Qué debes construir
Un hero de landing cuyo contenido entra en cascada al cargar la página:
<section class="hero">
<span class="badge" style="--i: 0">Nuevo · CodeForge Studio</span>
<h1 style="--i: 1">Construye interfaces que se sienten vivas</h1>
<p style="--i: 2">Animación CSS profesional: 60fps, con empatía y sin una línea de JavaScript.</p>
<div class="acciones" style="--i: 3">
<a class="cta principal" href="#">Empezar gratis</a>
<a class="cta secundaria" href="#">Ver demo</a>
</div>
</section>
<p class="nota">Recarga el preview (pestaña "Resultado") para repetir la entrada: badge → título → texto → botones.</p>body { font-family: system-ui; padding: 20px; background: #0f172a; }
.hero { max-width: 480px; padding: 36px 30px; display: grid; gap: 16px; justify-items: start; background: #1e1b4b; border: 1px solid #312e81; border-radius: 18px; }
.badge { font-size: 12px; font-weight: 700; color: #ddd6fe; background: rgba(109, 40, 217, 0.35); border: 1px solid #6d28d9; padding: 5px 12px; border-radius: 999px; }
h1 { margin: 0; font-size: 30px; line-height: 1.15; color: white; }
.hero p { margin: 0; font-size: 15px; line-height: 1.6; color: #cbd5e1; }
.acciones { display: flex; gap: 12px; }
.cta { padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; }
.principal { background: #6d28d9; color: white; }
.secundaria { color: #ddd6fe; border: 1px solid #4c1d95; }
.cta:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
@keyframes presentarse {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.hero > * { animation: presentarse 500ms ease-out backwards; animation-delay: calc(var(--i) * 120ms); }
.cta { transition: transform 180ms ease-out; }
.cta:hover, .cta:focus-visible { transform: translateY(-3px); }
}
.nota { font-size: 13px; color: #64748b; margin-top: 14px; max-width: 46ch; }Requisitos:
- Cuatro piezas mínimo — badge, título H1, párrafo y grupo de CTAs — entrando en orden de LECTURA, una tras otra.
- Stagger con la fórmula:
--ipor pieza +calc()— una sola@keyframes, un solo paso configurable (80-150ms entre piezas). - Cero parpadeo: ninguna pieza puede verse antes de su turno... y la página sin animaciones debe mostrar TODO el contenido (ya sabes qué par de decisiones garantizan ambas cosas a la vez).
- Estructura opt-in: el movimiento completo vive dentro de
@media (prefers-reduced-motion: no-preference)— es tu primer proyecto con el estándar nuevo de la lección 8. - Los CTAs rematan con su microinteracción de hover/foco (módulo 10: 150-250ms, transform, foco visible).
Reglas
- Solo se animan
transformyopacity. - La entrada completa (última pieza incluida) debe terminar antes de ~1 segundo: la cascada presenta, no retrasa.
- Nada de
opacity: 0en las reglas base de las piezas (si dudas del porqué, relee el quiz de la lección 4 — o descúbrelo en la pista 3).
40:00
Cuando estés listo, arranca el reloj.
Qué sigue
Módulo 11 cerrado — y con él, el CSS en movimiento completo: transiciones, transformaciones 2D/3D, keyframes, scroll y empatía. El módulo 12 cambia de material: SVG, el formato vectorial del diseñador-desarrollador — dibujar con código de verdad (viewBox por fin explicado de una vez por todas), y luego animar esos trazos con TODO lo que acabas de aprender.