WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
बंद बटन के साथ HTML टैब
896
byby.createsite
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
2 March 2025
HTML, लॉगिन रजिस्टर एनिमेटेड
5 July 2025
डार्क मोड वेबसाइट फ़ुटर HTML CSS कोड
13 May 2025
Roblox लॉगिन पेज HTML CSS
HTML
Copy
Tab 1
×
Tab 2
×
Tab 3
×
Tab 4
×
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #181D28; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .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; } .tab { position: absolute; width: 250px; height: 100px; background: #292B33; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); animation: tabSlide 10s linear infinite; } .tab:before { content: ''; position: absolute; top: 10px; left: 10px; width: 0; height: 0; border-style: solid; border-color: #292B33 transparent transparent transparent; border-width: 0 8px 8px 8px; animation: tabBlink 2s linear infinite alternate; } .tab .content { padding: 15px 20px; color: #E6DB74; display: flex; justify-content: space-between; align-items: flex-end; } .tab .close { display: inline-block; background: #75715E; border-radius: 50%; width: 24px; height: 24px; font-size: 16px; text-align: center; line-height: 24px; color: #F8F8F2; cursor: pointer; opacity: 0.7; transition: opacity 0.3s; } .tab .close:hover { opacity: 1; } @keyframes tabSlide { 0% { transform: translateY(-100px); } 50% { transform: translateY(0); } 100% { transform: translateY(100px); } } @keyframes tabBlink { 0% { border-width: 0 8px 8px 8px; } 50% { border-width: 0 16px 16px 16px; } 100% { border-width: 0 8px 8px 8px; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */