Exemplos de menu suspenso CSS animado

Abrir no Editor Video Publique Seu Código

Recomendado

29 May 2025

Snippet HTML de links de mídias sociais

1 July 2025

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

Exemplos de menu suspenso CSS animado

Recomendado

Um código de mathieu.ratro

Snippet HTML de links de mídias sociais

cidade de falhas

HTML

CSS

JS

Recomendado

Um código de mathieu.ratro

Snippet HTML de links de mídias sociais

cidade de falhas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS