WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Trasformazione dei dati
47
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
25 November 2024
Sito web reattivo con dati sugli studenti
18 June 2025
Portale della scuola: controllo dei risultati e pagamento delle tasse universitarie
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) */