La radio es muy temperamental ✅

1259 zegarkidawida

Abrir en el editor Video Publica tu código

Recomendado

3 January 2025

Reloj de React hecho de componentes de relojes

2 June 2025

Auriculares 3D

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

La radio es muy temperamental ✅

Recomendado

Un código de Landingpage1

Reloj de React hecho de componentes de relojes

Auriculares 3D

HTML

CSS

JS

Recomendado

Un código de Landingpage1

Reloj de React hecho de componentes de relojes

Auriculares 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS