WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
El susurrador de códigos
453
ByBy.inc
Abrir en el editor
Publica tu código
Recomendado
29 July 2024
Clasificación de emojis
10 September 2024
Piedra, papel, tijera V.2
8 October 2025
Fragmento de animación de carga de CSS
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; 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: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background-color: #000; } .code-element { position: absolute; width: 20px; height: 20px; opacity: 0; animation: codeDance 3s infinite alternate; } @keyframes codeDance { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } } .code-element:nth-child(1) { background: #F8F8F2; animation-delay: 0s; } /* Light gray background for the first element */ .code-element:nth-child(2) { background: #66D9EF; animation-delay: 0.2s; } .code-element:nth-child(3) { background: #AE81FF; animation-delay: 0.4s; } .code-element:nth-child(4) { background: #F92672; animation-delay: 0.6s; } /* ... more elements, varying colors and animation delays ... */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */