WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Pestañas HTML con botón de cierre
1090
byby.createsite
Abrir en el editor
Video
Publica tu código
0
Recomendado
2 June 2025
Un código de alejandrokundrah
3 September 2024
Rueda de la fortuna
24 July 2025
Código HTML del interruptor de palanca 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) */