WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS लोडिंग एनीमेशन उदाहरण
46
ByBy.inc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
19 September 2025
एनिमेटेड CSS ड्रॉपडाउन मेनू के उदाहरण
28 August 2025
CSS टैब उदाहरण: सरल HTML लेआउट
28 August 2025
CSS एनीमेशन कंटेनर उदाहरण
HTML
Copy
```html
Resposta
```
CSS
Copy
/* Base foundation */ * { 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; aspect-ratio: 9/16; } .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; aspect-ratio: 9/16; } /* Layers e motivação emocional */ .loading-element { background-color: #333333; width: 80px; height: 80px; border-radius: 50%; animation: loading-animation 1s linear infinite; position: relative; } @keyframes loading-animation { 0% { transform: scale(0); } 100% { transform: scale(1); } } .layer1 { width: 100%; height: 100%; background-color: #4D4D4D; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s; } .layer1::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #3F3F3F; width: 20px; height: 20px; border-radius: 50%; } /* Micro-detalhes para o replay value */ .layer2 { width: 20px; height: 20px; border-radius: 50%; background-color: #3F3F3F; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); animation: detalhe 2s linear infinite; } @keyframes detalhe { 50% { transform: scale(1); background-color: #666666; } 100% { transform: scale(0); background-color: #3F3F3F; } } /* Interações entre camadas e elementos */ .layer3 { width: 30px; height: 30px; border-radius: 50%; background-color: #2F2F2F; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: interacao 2s linear infinite; } @keyframes interacao { 50% { transform: scale(1); background-color: #777777; } 100% { transform: scale(0); background-color: #2F2F2F; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */