WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Extrait HTML d'animation de porte de salle CSS
329
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
22 April 2025
Un code par andres.stahr
25 April 2025
Un code de Metehan
22 August 2025
Commentaire d'espace réservé au code HTML
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #141821; 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: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 75%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; } .room { position: relative; width: 200px; height: 200px; margin: 10px; background: linear-gradient(to bottom, #222, #333); border-radius: 10px; opacity: 0; pointer-events: none; animation: roomLoop 10s infinite ease-in-out; } .shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0 90%); animation: shadowPulse 5s linear infinite; } .door { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-color: rgba(0, 255, 0, 0.5); animation: doorSwing 8s cubic-bezier(0.2, 0.8, 0.8, 1) infinite; } @keyframes roomLoop { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes shadowPulse { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } } @keyframes doorSwing { 0% { transform: rotate(0deg); } 50% { transform: rotate(45deg); } 100% { transform: rotate(0deg); } } .animation-container { /* The next lines will take on the added animation as well */ .room:nth-child(1) { animation-delay: 0s; /* Your code regarding .room animation */ /* */ /* // Example setting the initial state /* */ opacity: 1; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */