Estructura HTML del contenedor de animación CSS

1,462 byby.createsite

Abrir en el editor Publica tu código

Estructura HTML del contenedor de animación CSS

Recomendado

12 January 2026

Cargador de juegos HTML: botón de inicio y emulador de NES

2 July 2025

Iniciar sesión desde TheDOC

17 March 2026

Juego de obstáculos 3D para navegador con Three.js

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #181818;
      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%;
      width: 100%;
      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;
    }
    .error-message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      font-size: 3em;
      color: #ff0000; /* Esquecido no design */
      font-weight: bold;
      opacity: 0; /* Inicialmente invisível */
      animation: show-error 1s ease-in-out forwards;
    }

/* Animação: A mensagem de erro aparece e se torna maior */
    @keyframes show-error {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1.2); }
    }

.core {
      position: absolute;
      width: 100px; 
      height: 30px;
      background: #fff;
      border-radius: 8px;
      opacity: 0;  
      animation: emerge 2s linear infinite alternate; /* Emerge e se move gradualmente */
      mix-blend-mode: multiply;/* Superposição com transparência */ 
    }

.core.cycle1 {
      animation-delay: 0s;
    }
    .core.cycle2 {   
      animation-delay: 0.2s; 
      animation-direction: reverse;
    }

@keyframes emerge {
      0% { transform: scale(0.4); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

.hex {
      width: 150px;
      height: 150px;
      clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); 
      background: radial-gradient(circle at top left, #66D9EF 0%, #AE81FF 100%);
      --hex-size: 50px; /* Tamanho de cada lado do hexágono */
      animation: ripple 2s linear infinite alternate;
      position: absolute;
      animation-delay: 0.5s;
      z-index: -1; /* Retas atrás dos outros elementos */
     }

@keyframes ripple {
      0% {
        transform: rotate(0deg);
        filter: blur(0px) brightness(1);
      }
      50% {
        transform: rotate(10deg);
        filter: blur(10px) brightness(0.5); /* Aumenta o blur e diminui a luminosidade */
      }
      100% {
        transform: rotate(0deg);
        filter: blur(0px) brightness(1);
      }
    }

.line1 {
      width: 100%;
      height: 3px;
      background: #F92672; 
      transform: translateX(0%);
      position: absolute;
      animation: blink 1s step-start infinite; /* Palpita */
    }