Onglets HTML avec bouton Fermer

1,343 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 April 2024

Icônes sociales utilisant HTML et CSS

18 December 2025

Code source HTML5 du jeu Bloodmoney

9 December 2024

Effet d'animation de survol HTML CSS et Javascript

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