Ejemplos de menús desplegables CSS animados

1,284 byby.createsite

Abrir en el editor Publica tu código

Ejemplos de menús desplegables CSS animados

Recomendado

18 June 2023

Formulario de inicio de sesión simple

21 July 2025

Nexo de datos de Cyberpunk

27 March 2025

Calculadora de IMC

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