WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Frammento di animazione di caricamento CSS
495
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
24 July 2025
caricamento 3D delle cuffie
3 January 2025
Un codice di adonis1887
HTML
Copy
CSS
Copy
/* css_foundation */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background:url("./thumb.jpg") no-repeat center center; background-color: #000; 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; } /* animation */ .loading-element { position: relative; width: 100px; height: 100px; border-radius: 50%; /* criar uma sensação de realidade distorcida */ animation: loading-animation 1s linear infinite; } @keyframes loading-animation { 0% { border-radius: 50%; transform: scale(1) rotate(0deg); } 100% { border-radius: 50%; transform: scale(1.5) rotate(360deg); } } /* criar uma sensação de perda de controle */ .loading-element::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 0, 0, 0.5); mix-blend-mode: screen; border-radius: 50%; animation: loading-animation-2 1s linear infinite; } @keyframes loading-animation-2 { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(0.5) rotate(360deg); } } /* criar uma sensação de desintegração */ .loading-element::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 255, 0.5); mix-blend-mode: screen; border-radius: 50%; animation: loading-animation-3 1s linear infinite; } @keyframes loading-animation-3 { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(0.5) rotate(360deg); opacity: 0; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */