CSS Animation Container HTML Structure

Open In Editor 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

Advanced HTML Login Form

CSS Grid Animation Example

3D Rotating Login Signup Form HTML CSS

HTML

CSS

JS

Recommended

Advanced HTML Login Form

CSS Grid Animation Example

3D Rotating Login Signup Form HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS