Fragmento HTML de animación de ventana CSS

1,408 0 byby.createsite Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Fragmento HTML de animación de ventana CSS

Recomendado

27 May 2025

Un código de fragolahack

23 September 2024

Empresa local de venta de productos.

10 August 2025

Estructura de animación de bloques CSS

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

Comments 0

…