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

Un codice di yuhhxn

Modello di sito web portfolio per web designer

menu di navigazione

HTML

CSS

JS

Consigliato

Un codice di yuhhxn

Modello di sito web portfolio per web designer

menu di navigazione

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS