Webleb - Snippet di Codice - Frammento HTML di animazione di caricamento CSS

HTML

CSS

/* CSS Foundation */
    body {
      background-color: #272822;
      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: 25%;
      min-width: 100%;
      width: 100%;
      overflow-y: hidden;
      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;
    }

/* Animação: Phantom Loading */
    .animation-container {
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      0% {
        /* Comentário: A primeira iteração é uma representação da ansiedade, com elementos dispersos e sem sentido. */
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        /* Comentário: No meio da animação, os elementos começam a se organizar e formar uma falsa sensação de ordem. */
        transform: translate(-50%, -50%) scale(1.1);
      }
      100% {
        /* Comentário: Na última iteração, a ansiedade retorna e os elementos se dispersam novamente. */
        transform: translate(-50%, -50%) scale(0.9);
      }
    }

/* Elementos de Loading animados */
    .animation-container::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 2px solid #F8F8F2;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
      animation: loading 2s ease-in-out infinite;
    }
    @keyframes loading {
      0% {
        transform: translate(-50%, -50%) scale(1);
        border-width: 2px;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
        border-width: 1px;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        border-width: 2px;
      }
    }
    .animation-container::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #A6E22E;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0% {
        transform: translate(-50%, -50%) scale(1);
        transform-origin: center;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.1);
        transform-origin: center;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        transform-origin: center;
      }
    }

/* CSS para a barra de código */
    .codigo::before {
      content: '';
      font-size: 14px;
      color: #75715E;
    }

/* CSS para a barra de código que irá renderizar a animação */
    .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: 25%;
      min-width: 100%;
      width: 100%;
      overflow-y: hidden;
      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; }

.codigo {
      color: #F8F8F2;
    }
    .codigo .selector       { color: #F92672; }
    .codigo .property       { color: #66D9EF; }
    .codigo .value-number   { color: #AE81FF; }
    .codigo .value-string   { color: #E6DB74; }
    .codigo .value-color    { color: #A6E22E; }
    .codigo .brace          { color: #F8F8F2; }
    .codigo .comment        { color: #75715E; }
    .codigo .function       { color: #A6E22E; }

Frammento HTML di animazione di caricamento CSS

Consigliato

Casella di registrazione di accesso 3D Design HTML CSS

Pagina di accesso

Modello HTML CSS per sito Web dello sviluppatore

HTML

CSS

JS

Consigliato

Casella di registrazione di accesso 3D Design HTML CSS

Pagina di accesso

Modello HTML CSS per sito Web dello sviluppatore

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS