CSS Animation Container HTML Structure

Open In Editor Video Publish Your Code

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

CSS Animation Container HTML Structure

Recommended

HTML Live Code Editor

CSS Loading Animation with Background Image

CSS Login Form

HTML

CSS

JS

Recommended

HTML Live Code Editor

CSS Loading Animation with Background Image

CSS Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS