Estructura HTML del contenedor de animación CSS

931 byby.createsite

Abrir en el editor Publica tu código

Estructura HTML del contenedor de animación CSS

Recomendado

24 November 2025

Conceptos básicos de Baldis

22 April 2025

Un código de Metehan

1 December 2024

Efecto de desplazamiento del botón de llamada a la acción

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background:url("./thumb.jpg") no-repeat center center;
      background-color: black;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.codigo {
      position: absolute;
      top: 15%;
      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: 25%;
      max-width: 75%;
      width: 75%;
      height: 25%;
      overflow-y: hidden;
      box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
    }

.selector      { color: #F92672; }
    .property      { color: #66D9EF; }
    .value-number  { color: #AE81FF; }
    .value-string  { color: #E6DB74; }
    .value-color   { color: #A6E22E; }
    .function      { color: #A6E22E; }

.loading-element {
      position: relative;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      margin: 0 auto;
      animation: loading-animation 1s linear infinite;
    }

@keyframes loading-animation {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      20% {
        transform: scale(1);
        opacity: 1;
        background-color: #F92672;
      }
      40% {
        transform: scale(1.2);
        opacity: 0.7;
        background-color: #66D9EF;
      }
      60% {
        transform: scale(1);
        opacity: 1;
        background-color: #AE81FF;
      }
      80% {
        transform: scale(0.8);
        opacity: 0.5;
        background-color: #E6DB74;
      }
      100% {
        transform: scale(0);
        opacity: 0;
      }
    }

.animation-container {
      /* Um labirinto de blocos azuis que se desvanecem em direção à direita */
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      /* 
        O bloco central, representando a fonte de inspiração para o desenvolvedor
        que se afasta gradualmente do eixo central, simbolizando a confusão e a 
        perda de foco.
      */
      .bloco-central {
        position: relative;
        background-color: #66D9EF;
        width: 120px;
        height: 60px;
        margin-left: 20%;
        animation: bloco-central-animacao 2s linear infinite;
      }
      /* 
        Blocos periféricos que flutuam em direção à saída do labirinto, 
        representando a tentativa de encontrar um caminho.
      */
      .bloco-periferico {
        position: relative;
        background-color: #AE81FF;
        width: 40px;
        height: 20px;
        margin-left: 80%;
        animation: bloco-periferico-animacao 1.5s linear infinite;
      }
      /* 
        Elementos de fundo que se destacam para representar a sensação de confusão.
      */
      .elemento-fundo {
        position: absolute;
        background-color: #F92672;
        width: 20px;
        height: 20px;
        animation: elemento-fundo-animacao 2.5s linear infinite;
      }
    }

@keyframes bloco-central-animacao {
      0% {
        transform: translateX(-20%);
        opacity: 1;
      }
      20% {
        transform: translateX(0);
        opacity: 1;
      }
      40% {
        transform: translateX(20%);
        opacity: 0.5;
      }
      60% {
        transform: translateX(0);
        opacity: 0.5;
      }
      80% {
        transform: translateX(10%);
        opacity: 1;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

@keyframes bloco-periferico-animacao {
      0% {
        transform: translateX(100%);
        opacity: 0;
      }
      20% {
        transform: translateX(0);
        opacity: 1;
      }
      40% {
        transform: translateX(-50%);
        opacity: 0.8;
      }
      60% {
        transform: translateX(-10%);
        opacity: 0.5;
      }
      80% {
        transform: translateX(0);
        opacity: 0.5;
      }
      100% {
        transform: translateX(100%);
        opacity: 0;
      }
    }

@keyframes elemento-fundo-animacao {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      30% {
        transform: scale(1.2);
        opacity: 0.7;
      }
      60% {
        transform: scale(1.5);
        opacity: 0.5;
      }
      80% {
        transform: scale(0.8);
        opacity: 0.3;
      }
      100% {
        transform: scale(0);
        opacity: 0;
      }
    }