Ejemplos de menús desplegables CSS animados

871 byby.createsite

Abrir en el editor Video Publica tu código

Ejemplos de menús desplegables CSS animados

Recomendado

22 December 2025

Código para insertar el juego HTML5 de Geometry Dash Lite

10 June 2025

Un código de Mete

23 November 2024

Página de inicio - Furniture Inc

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

Recomendado

Código para insertar el juego HTML5 de Geometry Dash Lite

Un código de Mete

Página de inicio - Furniture Inc

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS