WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
O rádio está tão mal-humorado ✅
1262
zegarkidawida
Abrir no Editor
Video
Publique Seu Código
0
Recomendado
2 June 2025
EXEMPLO DE HORÁRIO
10 January 2026
Relógio React feito de componentes de relógio
13 June 2025
Um Código de Metehan
HTML
Copy
Select Mood
Cranky
Sleepy
Fearful
Drunk
Dreamy
Peppy
CSS
Copy
@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); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */