Pestaña sobrecargada

804 byby.createsite

Abrir en el editor Publica tu código

Recomendado

10 August 2025

Pestañas HTML con botón de cierre

12 December 2025

Menú de pestañas de JavaScript con botones redondos

12 March 2026

Juegos desbloqueados: Cargador de zonas HTML5 y bloqueador de pestañas

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  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: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}

.tab {
  position: absolute;
  width: 80px;
  height: 40px;
  background-color: #333;
  border-radius: 8px;
  transform-origin: center;
  animation: tabPulse 1s infinite alternate;
  
}
@keyframes tabPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tab:nth-child(1) {
  left: 10%;
  top: 10%;
  animation-delay: 0s;
}
.tab:nth-child(2) {
  left: 30%;
  top: 10%;
  animation-delay: 0.2s;
}
.tab:nth-child(3) {
  left: 50%;
  top: 10%;
  animation-delay: 0.4s;
}
.tab:nth-child(4) {
  left: 70%;
  top: 10%;
  animation-delay: 0.6s;
}