Fragmento HTML de animación de ventana CSS

24 ByBy.inc

Abrir en el editor Publica tu código

Fragmento HTML de animación de ventana CSS

Recomendado

27 November 2024

Sitio web de portafolio completo

27 January 2025

Un sitio de periódico responsivo

17 May 2025

sociedad moderna

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

Recomendado

Sitio web de portafolio completo

Un sitio de periódico responsivo

sociedad moderna

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS