Atrapados0
La página se ha escondido bajo tierra.
Un topo se la ha llevado a su madriguera. Intenta atraparlo o vuelve al inicio por el camino de siempre.
Volver al inicioHTML + CSS404
404 Topos
Un césped con seis madrigueras donde asoma un topo con el cartel 404; tócalo a tiempo y suma un punto al marcador.
Ajustes
1x
Código
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>404 · Página no encontrada</title>
<style>
body { margin: 0; background: #000; }
.n4-moles {
--accent: #f4c430;
--k: 1;
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
container-type: size;
display: grid;
place-items: center;
background: #000;
color: #f5f5f7;
font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 1.4;
}
.n4-moles *,.n4-moles *::before,.n4-moles *::after {
box-sizing: border-box;
}
.n4-moles .n4-copy {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6cqmin;
width: 100%;
max-width: 680px;
padding: 0 6cqw;
}
.n4-moles .n4-title {
margin: 0;
font-size: clamp(17px,4.2cqmin,36px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
}
.n4-moles .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-moles .n4-tag {
font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.n4-moles .n4-cta {
margin-top: 1.8cqmin;
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.5em;
border-radius: 999px;
background: #f5f5f7;
color: #000;
font-size: clamp(13px,2.2cqmin,16px);
font-weight: 600;
text-decoration: none;
transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.n4-moles .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-moles .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-moles .n4-stars,.n4-moles .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-moles .n4-stars {
background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
opacity: .75;
animation: n4-moles-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-moles .n4-stars2 {
background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
opacity: .55;
animation: n4-moles-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-moles [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-moles-tw {
from {
opacity: .3;
}
}
@keyframes n4-moles-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-moles-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-moles *,.n4-moles *::before,.n4-moles *::after {
animation: none!important;
transition: none!important;
}
}
.n4-moles {
background: radial-gradient(90% 45% at 50% 0,#eef9e2,transparent 75%),linear-gradient(#c7e7ab,#8fca66 55%,#67a845);
color: #17330f;
}
.n4-moles .n4-lawn {
width: min(60cqmin,420px);
font-size: min(2cqmin,14px);
margin-bottom: 1.2cqmin;
padding: 1em 1.4em .8em;
border-radius: 1.6em;
background: repeating-linear-gradient(100deg,rgba(255,255,255,.07) 0 .3em,transparent .3em .9em),radial-gradient(120% 90% at 50% 0,#7cc95a,#4c9433);
box-shadow: inset 0 .3em 0 rgba(255,255,255,.28),inset 0 -.5em 1em rgba(0,0,0,.2),0 1.4em 2em -1.2em rgba(23,51,15,.6);
}
.n4-moles .n4-holes {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: .4em 1.4em;
}
.n4-moles .n4-hole {
position: relative;
height: 7em;
padding: 0;
border: 0;
border-radius: 1em;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.n4-moles .n4-hole::before {
content: "";
position: absolute;
left: 6%;
right: 6%;
bottom: .3em;
height: 2.6em;
border-radius: 50%;
background: radial-gradient(closest-side,#1f1005 50%,#4a2e16 72%,#7a5230 94%,transparent);
transition: filter .2s;
}
.n4-moles .n4-hole::after {
content: "";
position: absolute;
z-index: 2;
left: 6%;
right: 6%;
bottom: .3em;
height: 2.6em;
border-radius: 50%;
box-shadow: inset 0 -.5em 0 #8a5c35;
pointer-events: none;
}
.n4-moles .n4-hole:hover::before {
filter: brightness(1.35);
}
.n4-moles .n4-hole:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.n4-moles .n4-pit {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 1.6em;
overflow: hidden;
z-index: 1;
}
.n4-moles .n4-mole {
position: absolute;
left: 22%;
right: 22%;
bottom: 0;
height: 5em;
border-radius: 50% 50% 38% 38%/62% 62% 30% 30%;
background: radial-gradient(circle at 37% 33%,#111 0 .2em,transparent .24em),radial-gradient(circle at 63% 33%,#111 0 .2em,transparent .24em),radial-gradient(circle at 37% 31%,#fff 0 .34em,transparent .38em),radial-gradient(circle at 63% 31%,#fff 0 .34em,transparent .38em),radial-gradient(ellipse .5em .38em at 50% 47%,#f49ac1 90%,transparent),radial-gradient(ellipse 1.4em 1em at 50% 54%,#d8b48a 92%,transparent),linear-gradient(#8a5a35,#5e3b20);
transform: translateY(105%);
transition: transform calc(.16s / var(--k)) cubic-bezier(.3,1.5,.6,1);
}
.n4-moles .n4-mole b {
position: absolute;
left: 50%;
bottom: .55em;
translate: -50% 0;
padding: .14em .35em;
border-radius: .15em;
background: #f1d29a;
color: #5b3a1e;
font: 800 .8em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
rotate: -6deg;
box-shadow: 0 .1em 0 #a9824b;
}
.n4-moles .n4-up .n4-mole {
transform: translateY(6%);
}
.n4-moles .n4-hit .n4-mole {
transform: translateY(42%) scale(1.12,.78);
transition-duration: .08s;
}
.n4-moles .n4-count {
display: flex;
justify-content: center;
align-items: baseline;
gap: .6em;
margin: .5em 0 0;
font: 700 .95em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
text-transform: uppercase;
letter-spacing: .14em;
color: #f4ffe8;
}
.n4-moles .n4-count b {
min-width: 1.6em;
font-size: 1.7em;
color: var(--accent);
text-shadow: 0 .08em 0 rgba(0,0,0,.25);
}
.n4-moles .n4-tag {
color: #2d5f1d;
}
.n4-moles .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 800;
letter-spacing: -.03em;
}
.n4-moles .n4-sub {
color: #2f5223;
}
.n4-moles .n4-cta {
background: #17330f;
color: #f4ffe8;
}
</style>
</head>
<body>
<main class="n4-moles">
<div class="n4-copy">
<div class="n4-lawn">
<div class="n4-holes" role="group" aria-label="Madrigueras del jardín">
<button class="n4-hole" type="button" aria-label="Madriguera 1"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
<button class="n4-hole" type="button" aria-label="Madriguera 2"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
<button class="n4-hole" type="button" aria-label="Madriguera 3"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
<button class="n4-hole" type="button" aria-label="Madriguera 4"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
<button class="n4-hole" type="button" aria-label="Madriguera 5"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
<button class="n4-hole" type="button" aria-label="Madriguera 6"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
</div>
<p class="n4-count"><span>Atrapados</span><b aria-live="polite" translate="no">0</b></p>
</div>
<span class="n4-tag">Jardín 404</span>
<h1 class="n4-title">La página se ha escondido bajo tierra.</h1>
<p class="n4-sub">Un topo se la ha llevado a su madriguera. Intenta atraparlo o vuelve al inicio por el camino de siempre.</p>
<a class="n4-cta" href="/">Volver al inicio</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-moles").forEach((el) => {
const holes = Array.from(el.querySelectorAll(".n4-hole"));
const out = el.querySelector(".n4-count b");
const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
let cur = -1, n = 0, t1 = 0, t2 = 0;
const pop = () => {
let i = Math.floor(Math.random() * holes.length);
if (i === cur) i = (i + 1) % holes.length;
cur = i;
holes[i].classList.add("n4-up");
t1 = setTimeout(() => {
holes[i].classList.remove("n4-up");
cur = -1;
t2 = setTimeout(pop, (300 + Math.random() * 500) / k);
}, (900 + Math.random() * 400) / k);
};
holes.forEach((h, i) => h.addEventListener("click", () => {
if (i !== cur) return;
clearTimeout(t1);
clearTimeout(t2);
n++;
out.textContent = String(n);
h.classList.remove("n4-up");
h.classList.add("n4-hit");
cur = -1;
t2 = setTimeout(() => { h.classList.remove("n4-hit"); pop(); }, 420 / k);
}));
t2 = setTimeout(pop, 600 / k);
});
</script>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Ver todos: 404Dónde usarlo
Una página de error de jardín con un juego pequeño: seis madrigueras en un césped verde y un topo con un cartel de madera que dice 404 asomando por una de ellas durante un segundo. Atrápalo con un clic, un toque o el teclado y se aplasta mientras sube el marcador.
Cada madriguera es un botón real con su etiqueta y su anillo de foco, así que el juego funciona sin ratón. El control de velocidad cambia lo rápido que aparece el topo. Ajusta el amarillo girasol y enlaza el botón con tu portada.