Ejemplo de pestañas CSS: diseño HTML simple

60 ByBy.inc

Abrir en el editor Publica tu código

Ejemplo de pestañas CSS: diseño HTML simple

Recomendado

17 July 2025

Formulario de registro de inicio de sesión giratorio 3D HTML CSS

21 January 2025

Página de destino de la agencia inmobiliaria

31 July 2025

fallo en la máquina de realidad

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #181818;  
  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;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.tab {
  position: absolute;
  width: 200px;
  height: 80px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform-origin: top right; /* Define ponto de rotação para transformações */
  /* Transformação de escala e rotação para criar um efeito de zoom e  "overflow" */
  animation: tabChaos 10s linear infinite; /* Chamando a animação "tabChaos" com duração de 10 segundos, de acordo com a duração da própria animação e duração infinita */
}
/* Animação "tabChaos", aplicando variação de escala, rotação e translção para cada tab */
@keyframes tabChaos {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: scale(0.8) rotate(15deg);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2) rotate(-20deg);
    opacity: 0.5;
    top: 20px; /* Movimento vertical */ 
  }
  75% {
    transform: scale(0.9) rotate(10deg);
    opacity: 0.6;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

Recomendado

Formulario de registro de inicio de sesión giratorio 3D HTML CSS

Página de destino de la agencia inmobiliaria

fallo en la máquina de realidad

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS