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

regalo di compleanno

HTML

CSS

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;
}

Gioco di abbinamento di Halloween

Consigliato

Animazione di caricamento CSS Struttura HTML

codice recensione iphone 16

regalo di compleanno

HTML

CSS

JS

Consigliato

Animazione di caricamento CSS Struttura HTML

codice recensione iphone 16

regalo di compleanno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS