Fragmento HTML de animación de ventana CSS

937 byby.createsite

Abrir en el editor Publica tu código

Fragmento HTML de animación de ventana CSS

Recomendado

10 July 2025

Plantilla de menú de restaurante HTML

27 August 2024

Formulario de inicio de sesión

22 June 2025

Blog creativo: Diseño, podcast y portafolio HTML

HTML

CSS

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

body {
      background-color: #141824;
      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%;
      max-width: 90%;
      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%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background: transparent;
    }

/* Thursday: Tab Overload Animation */
    .window {
      position: absolute;
      width: 100px; /* Ajustar o tamanho de acordo com o design */
      height: 80px; /* Ajustar o tamanho de acordo com o design */
      border-radius: 8px;
      margin: 20px; /* Ajustar a distância entre as janelas */
      background: rgba(255, 255, 255, 0.05);
      pointer-events: none; /* Evitar interação com o usuário */
      animation: tabFlicker 1s linear infinite;
    }

.content {
      position: absolute;
      top: 10px;
      left: 10px;
      color: #F8F8F2;
      font-size: 12px;
      text-overflow: ellipsis; /* Cortar texto que excede o espaço */
      overflow: hidden; /* Ocultar texto que excede o espaço */
    }

/* Animação de piscamento para as janelas */
    @keyframes tabFlicker {
      0% {
        opacity: 0.9;
      }
      50% {
        opacity: 0.7;
      }
      100% {
        opacity: 0.9;
      }
    }

.tab-single {
      animation-delay: 0.0s; 
      /* Animação independente*/
    }