La radio est tellement lunatique ✅

1,814 0 Champs et interrupteurs zegarkidawida Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

16 January 2026

Lecteur de jeux Flash avec émulateur Ruffle

25 July 2025

Plateforme de négociation minière : échangez des métaux et des minéraux

18 December 2025

Code HTML du jeu Elastic Face

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap");

* {
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	font-family: "Poppins", serif;
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 500;
	color: #9f01fc;
	background: linear-gradient(135deg, #f6f8fd 0%, #f1f4f9 100%);
}

fieldset {
	border: 2px solid #9f01fc;
	padding: 2rem 4rem;
	border-radius: 1.5rem;
}

label {
	margin-right: 15px;
	line-height: 32px;
}

input {
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #d59af7;
	transition: 0.2s all linear;
	margin-right: 5px;
	position: relative;
	top: 6px;
	cursor: pointer;
	border-radius: 0.2rem;
}

legend {
	padding: 0.5rem 1rem;
	font-size: 1.2rem;
	font-weight: 700;
}

input:checked {
	border: 10px solid #9f01fc;
}

#cranky:checked {
	animation: wiggle 1s infinite;
}

#sleepy:checked {
	animation: sleep 2s alternate infinite;
}

#fearful:checked {
	animation: shake 0.1s infinite;
}

#drunk:checked {
	animation: stagger 2s forwards ease-in-out;
}

#dreamy:checked {
	animation: float 10s ease-in-out infinite alternate-reverse;
}

#peppy:checked {
	animation: bounce 0.5s infinite;
}

@keyframes wiggle {
	0%,
	7% {
		transform: rotateZ(0);
	}
	15% {
		transform: rotateZ(-15deg);
	}
	20% {
		transform: rotateZ(10deg);
	}
	25% {
		transform: rotateZ(-10deg);
	}
	30% {
		transform: rotateZ(6deg);
	}
	35% {
		transform: rotateZ(-4deg);
	}
	40%,
	100% {
		transform: rotateZ(0);
	}
}

@keyframes sleep {
	from {
		opacity: 0.4;
		border: 8px solid #9f01fc;
	}

to {
		opacity: 1;
		border: 4px solid #9f01fc;
	}
}

@keyframes shake {
	0% {
		transform: translateX(0);
	}

50% {
		transform: translateX(5px);
	}

100% {
		transform: translateX(-5px);
	}
}

@keyframes stagger {
	0% {
		transform: rotate(0);
	}

25% {
		transform: rotate(-45deg);
	}

50% {
		transform: rotate(30deg);
	}

75% {
		transform: rotate(90deg);
	}

100% {
		transform: rotate(45deg);
	}
}

@keyframes float {
	0% {
		trasform: translateY(0) rotateZ(25deg);
	}

30% {
		transform: translateY(-10px) rotateZ(-25deg);
	}

55% {
		transform: translateY(-15px) rotateZ(25deg);
	}

75% {
		transform: translateY(-10px) rotateZ(-25deg);
	}

100% {
		transform: translateY(-0px) rotateZ(0deg);
	}
}

@keyframes bounce {
	0%,
	40%,
	100% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(-20px);
	}
}

Comments 0

…