WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Transformación de datos
661
byby.createsite
Abrir en el editor
Publica tu código
Recomendado
29 October 2025
Plantilla HTML básica de Three.js
2 March 2025
Un código de lebdev
11 March 2024
Generador de códigos QR
HTML
Copy
1
2
3
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; } /* Animação dos elementos de dados */ .data-element { position: relative; width: 100px; height: 100px; background-color: #fff; border-radius: 10px; transform-origin: center center; display: flex; flex-direction: column; justify-content: center; align-items: center; animation: data-morph 1s ease infinite; } .data-element:nth-child(1) { animation-delay: 0s; } .data-element:nth-child(2) { animation-delay: 0.2s; } .data-element:nth-child(3) { animation-delay: 0.4s; } @keyframes data-morph { 0% { transform: scale(1); } 100% { transform: scale(1.3); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */