WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Esempio di animazione della griglia CSS
648
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
18 June 2025
Un codice di ByBy.inc
1 January 2025
Un codice per codice
21 December 2024
password di accesso
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #181A23; 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; } .cell { position: relative; width: 10vw; height: 10vh; background: #F8F8F2; border-radius: 10px; opacity: 0.7; transform-style: preserve-3d; animation: dream-weave 15s linear infinite alternate; } .cell.cell1 { background: #66D9EF; /* azul */ } .cell.cell2 { background: #AE81FF; /* roxo */ } .cell.cell3 { background: #E6DB74; /* amarelo */ } .cell.cell4 { background: #A6E22E; /* verde */ } .cell.cell5 { background: #F92672; /* vermelho */ } .code { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color: #F8F8F2; animation: code-pulse 3s linear infinite alternate; } @keyframes dream-weave { 0% { transform: rotateY(0deg) translateZ(0px); } 50% { transform: rotateY(180deg) translateZ(-20px); } 100% { transform: rotateY(360deg) translateZ(0px); } } @keyframes code-pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */