Onglets HTML avec bouton Fermer

1,196 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

1 October 2025

Animation de chargement CSS Structure HTML

20 June 2025

Cartes de liens vers les réseaux sociaux HTML

20 March 2026

Exemple de formulaire de connexion HTML avec connexion via les réseaux sociaux

HTML

CSS

* {
  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; } 
}