Structure HTML du conteneur d'animation CSS

1,586 byby.createsite

Remixer Ouvrir dans l'éditeur Publiez votre code

Structure HTML du conteneur d'animation CSS

Recommandé

19 May 2026

Charger du code HTML et des scripts externes via l'API Fetch

11 March 2024

Modèle de site Web de portfolio HTML CSS

20 October 2024

Bouton de dégradé 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 */
    }