Exemples de menus déroulants CSS animés

973 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

29 May 2025

Un code par mathieu.ratro

20 February 2026

Modèle HTML de compteur de clics de souris

2 March 2025

Un code de M. Duck

HTML

<body>
 
  <div class="animation-container">
    <div class="dropdown">
      <span class="dropdown-link">Feeling Inadequate</span>
      <ul class="dropdown-menu">
        <li class="dropdown-item">Didn't meet expectations again</li>
        <li class="dropdown-item">Perceived as less competent</li>
        <li class="dropdown-item">Second-guessing every decision</li>
        <li class="dropdown-item" style="animation-delay: 0.2s;">Not good enough</li>
        <li class="dropdown-item" style="animation-delay: 0.4s;">Always strive for more</li>
      </ul>
    </div>
    <div class="dropdown">
      <span class="dropdown-link">Should Have Known Better</span>
      <ul class="dropdown-menu">
        <li class="dropdown-item">Missed a crucial detail</li>
        <li class="dropdown-item">Allowed a preventable error to happen</li>
        <li class="dropdown-item">Struggled to learn from past mistakes</li>
        <li class="dropdown-item" style="animation-delay: 0.2s;">Beginner's mind, forever?</li>
        <li class="dropdown-item" style="animation-delay: 0.4s;">Never quite feeling prepared</li>
      </ul>
    </div>
    
  </div>

</body>

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background-color: #333333;
      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%;
      min-width: 100%;
      width: 100%;
      overflow-y: auto;
      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: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      background: transparent;
      animation: friday_ui-loop 5s infinite linear;
    }
    @keyframes friday_ui-loop {
      0% {
        opacity: 0; 
      }
      100% {
        opacity: 1;
      }
    }