O rádio está tão mal-humorado ✅

1262 zegarkidawida

Abrir no Editor Video Publique Seu Código

Recomendado

2 June 2025

Relógio React feito de componentes de relógio

13 June 2025

Um Código de Metehan

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

O rádio está tão mal-humorado ✅

Recomendado

EXEMPLO DE HORÁRIO

Relógio React feito de componentes de relógio

Um Código de Metehan

HTML

CSS

JS

Recomendado

EXEMPLO DE HORÁRIO

Relógio React feito de componentes de relógio

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS