Estrutura HTML do contêiner de animação CSS

392 ByBy.inc

Abrir no Editor Publique Seu Código

Estrutura HTML do contêiner de animação CSS

Recomendado

19 March 2025

Página de destino de loja de informática

2 July 2025

Login do TheDOC

10 July 2025

Animação de interface flutuante CSS

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

Recomendado

Página de destino de loja de informática

Login do TheDOC

Animação de interface flutuante CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS