WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS रूम डोर एनिमेशन HTML स्निपेट
841
byby.createsite
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
0
अनुशंसित
17 July 2025
त्रुटि 404 पृष्ठ HTML टेम्पलेट
5 September 2025
HTML छवि ऑब्जेक्ट एनीमेशन कंटेनर
30 December 2025
एनिमेटेड ऑर्डर बटन HTML/CSS
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) */