Webleb - Extraits de Code - Extrait HTML d'animation de chargement 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; }

Extrait HTML d'animation de chargement CSS

Recommandé

Exemple d'animation de calque CSS

Formulaire de connexion

Un code de Gregory

HTML

CSS

JS

Recommandé

Exemple d'animation de calque CSS

Formulaire de connexion

Un code de Gregory

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS