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 Taupes
Une pelouse avec six terriers d'où surgit une taupe tenant un panneau 404 ; touche-la à temps pour marquer un point.
Réglages
1x
Code
<!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 · Page introuvable</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="Terriers du jardin">
<button class="n4-hole" type="button" aria-label="Terrier 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="Terrier 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="Terrier 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="Terrier 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="Terrier 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="Terrier 6"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
</div>
<p class="n4-count"><span>Attrapées</span><b aria-live="polite" translate="no">0</b></p>
</div>
<span class="n4-tag">Jardin 404</span>
<h1 class="n4-title">La page s'est cachée sous terre.</h1>
<p class="n4-sub">Une taupe l'a emportée dans son terrier. Essaie de l'attraper ou retourne à l'accueil par le chemin habituel.</p>
<a class="n4-cta" href="/">Retour à l’accueil</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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans 404
Voir tout : 404Où l’utiliser
Une page d'erreur de jardin avec un petit jeu : six terriers dans une pelouse bien verte, et une taupe qui tient un panneau en bois 404 sort d'un trou au hasard pendant environ une seconde. Attrape-la d'un clic, d'un toucher ou au clavier, elle s'aplatit et le compteur monte.
Chaque terrier est un vrai bouton avec son libellé et son anneau de focus, donc le jeu fonctionne sans souris. Le réglage de vitesse change la cadence des apparitions. Ajuste le jaune tournesol et relie le bouton à l'accueil.