WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
लोडिंग प्रभाव के साथ CSS एनिमेटेड पृष्ठभूमि
77
ByBy.inc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
10 July 2025
HTML CSS लॉगिन फ़ॉर्म टेम्पलेट
12 August 2025
मैट्रिक्स पृष्ठभूमि के साथ HTML लॉगिन फ़ॉर्म
31 January 2025
शुद्ध CSS कार्ड मूवीज़ 3D
HTML
Copy
```html
```
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) */