WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Gioco di abbinamento di Halloween
2429
Andev.web
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
14 October 2025
Animazione di caricamento CSS Struttura HTML
19 November 2024
codice recensione iphone 16
25 November 2024
regalo di compleanno
HTML
Copy
Andev Web
Click each layer to stop.
Double-click to reset.
CSS
Copy
html { min-height: 100vh; display: grid; place-items: center; background: #222; } * { box-sizing: border-box; } p { font-family: system-ui; text-align: center; color: orange; } #box { width: 250px; height: 750px; border-radius: 125px; overflow: hidden; transform: scale(0.6); box-shadow: 0px 0px 50px orange; } .layer { width: 1000px; height: 250px; float: left; outline: 1px solid #222; --speed: 1s; } .layer:nth-child(odd) { animation: spin var(--speed) linear infinite; } .layer:nth-child(even) { animation: spin var(--speed) linear reverse infinite; } .piece { width: 250px; aspect-ratio: 1/1; float: left; background: url("https://img.freepik.com/free-vector/happy-halloween-character-collection_23-2148636622.jpg?size=626&ext=jpg&ga=GA1.1.2008272138.1721779200&semt=ais_user"); background-size: 1000px 800px; } @keyframes spin { 100% { transform: translateX(-750px); } } .piece:nth-child(1), .piece:last-child { /* background: red; */ } .piece:nth-child(2) { /* background: green; */ } .piece:nth-child(3) { /* background: blue; */ } .lastpiece { /* background: red; */ } .layer:nth-child(1) .piece:nth-child(1), .layer:nth-child(1) .piece:nth-child(4) { background-position: -10px -50px; } .layer:nth-child(2) .piece:nth-child(1), .layer:nth-child(2) .piece:nth-child(4) { background-position: -10px -300px; } .layer:nth-child(3) .piece:nth-child(1), .layer:nth-child(3) .piece:nth-child(4) { background-position: -10px -550px; } .layer:nth-child(1) .piece:nth-child(2) { background-position: -250px -50px; } .layer:nth-child(2) .piece:nth-child(2) { background-position: -250px -300px; } .layer:nth-child(3) .piece:nth-child(2) { background-position: -250px -550px; } .layer:nth-child(1) .piece:nth-child(3) { background-position: -500px -50px; } .layer:nth-child(2) .piece:nth-child(3) { background-position: -500px -300px; } .layer:nth-child(3) .piece:nth-child(3) { background-position: -500px -550px; }
JS
Copy
let layers = document.querySelectorAll(".layer"); layers.forEach(function (elm) { elm.addEventListener("click", function (e) { let p = document.elementFromPoint(e.clientX, e.clientY); elm.style.animation = "none"; if (p.classList.contains("one") || p.classList.contains("four")) { elm.style.transform = "translateX(0px)"; } if (p.classList.contains("two")) { elm.style.transform = "translateX(-250px)"; } if (p.classList.contains("three")) { elm.style.transform = "translateX(-500px)"; } }); elm.addEventListener("dblclick", function (e) { let p = document.elementFromPoint(e.clientX, e.clientY); elm.style.animation = ""; elm.style.transform = ""; }); });