WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animazione di caricamento CSS Struttura HTML
51
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
19 November 2024
codice recensione iphone 16
12 June 2025
Un codice di Mete
8 February 2025
caricamento animazione
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background:url("./thumb.jpg") no-repeat center center; background-color: black; background-size: cover; 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: 25%; max-width: 75%; width: 75%; height: 25%; top:15%; overflow-y: hidden; box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .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; } .loading-element { position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #E6DB74; animation: loading-animation 1s linear infinite; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 50px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 255, 255, 0.5); } @keyframes loading-animation { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } @keyframes fragment-disappearance { 0% { opacity: 1; } 100% { opacity: 0; } } .fragment-1 { position: relative; width: 80px; height: 100px; border-radius: 10px; background-color: #66D9EF; transform: rotate(25deg); animation: fragment-animation 3s linear infinite; } @keyframes fragment-animation { 0% { transform: rotate(25deg) scale(1); bottom: -100px; } 20% { transform: rotate(25deg) scale(1.5); bottom: 150px; } 40% { transform: rotate(25deg) scale(1); bottom: -100px; } 60% { transform: rotate(25deg) scale(0.5); bottom: -150px; } 100% { transform: rotate(25deg) scale(1); bottom: -100px; } } @keyframes fragment-disappearance { 0% { opacity: 1; } 100% { opacity: 0; } } .fragment-2 { position: relative; width: 120px; height: 80px; border-radius: 10px; background-color: #F92672; transform: rotate(-30deg); animation: fragment-animation-2 2s linear infinite; } @keyframes fragment-animation-2 { 0% { transform: rotate(-30deg) scale(1); bottom: -80px; } 20% { transform: rotate(-30deg) scale(1.2); bottom: 50px; } 40% { transform: rotate(-30deg) scale(1); bottom: -80px; } 60% { transform: rotate(-30deg) scale(0.8); bottom: -130px; } 100% { transform: rotate(-30deg) scale(1); bottom: -80px; } } .fragment-3 { position: relative; width: 150px; height: 60px; border-radius: 10px; background-color: #3E8E41; transform: rotate(45deg); animation: fragment-animation-3 4s linear infinite; } @keyframes fragment-animation-3 { 0% { transform: rotate(45deg) scale(1); bottom: -60px; } 25% { transform: rotate(45deg) scale(1.1); bottom: 30px; } 50% { transform: rotate(45deg) scale(1); bottom: -60px; } 75% { transform: rotate(45deg) scale(0.9); bottom: -120px; } 100% { transform: rotate(45deg) scale(1); bottom: -60px; } } .loading-element::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: #E6DB74; animation: fragment-disappearance 5s linear infinite; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */