WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Trasformazione dei dati
477
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
21 July 2025
Nesso di dati cyberpunk
30 October 2025
Barra di navigazione dei social media CSS
12 July 2025
fioritura dei dati
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) */