Fragmento HTML de animación de ventana CSS

1,225 byby.createsite

Abrir en el editor Publica tu código

Fragmento HTML de animación de ventana CSS

Recomendado

21 April 2026

YouTube desbloqueado

29 July 2024

juego de serpiente

16 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

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*/
    }