WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Contenedor de animación CSS con cuenta regresiva
603
ByBy.inc
Abrir en el editor
Publica tu código
Recomendado
21 July 2023
Formulario con fondo de vídeo
25 August 2024
Sistema solar 3D CSS
9 September 2024
Generador de contraseñas
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #181818; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background:transparent; } .figure { position: relative; width: 10vw; height: 10vw; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: figureAnimation 10s linear infinite; } .figure::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.05); } .figure:nth-child(1) { animation-delay: 0s; } .figure:nth-child(2) { animation-delay: 1.5s; } .figure:nth-child(3) { animation-delay: 3s; } .figure:nth-child(4) { animation-delay: 4.5s; } /* * * A 'Waiting Room' eterna e claustrofóbica. Cada figura * representa uma ansiedade existencial suspensa no tempo. */ @keyframes figureAnimation { 0% { transform: rotate(0deg) scale(1); opacity: 1; } 50% { transform: rotate(360deg) scale(1.2); opacity: 0.5; } 100% { transform: rotate(720deg) scale(1); opacity: 1; } } .countdown { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); color: rgba(255, 255, 255, 0.8); font-size: 140px; font-weight: bold; animation: countdown 5s linear infinite; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); } @keyframes countdown { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */