WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation de chargement CSS Structure HTML
46
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
29 June 2025
Un code de Mete
28 December 2024
Une page d'accueil matricielle créée avec des index
27 November 2024
Page de destination - Modèle IA
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) */