Fragmento de animación de carga descendente CSS

21 ByBy.inc

Abrir en el editor Publica tu código

Fragmento de animación de carga descendente CSS

Recomendado

27 June 2025

Ejemplo de página web de portafolio

14 April 2023

Barra de navegación CSS responsiva

12 January 2025

Un código de Mikeykun

HTML

CSS

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

body {
      background-color: #2C343F; /* escuridão e um toque de azul escuro */
      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: auto;
      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;
    }

/*
    * Desenho principal
    */
    .tue_falling_loading::before,
    .tue_falling_loading::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

.tue_falling_loading {
      width: 50px;
      height: 50px;
      background: linear-gradient(to right, #ff99cc, #ccff99);
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
      animation: tue_falling_loading 2s infinite;
      perspective: 200px;
    }

.tue_falling_loading::before {
      background: conic-gradient(rgba(255, 153, 204, 0.5), rgba(204, 255, 153, 0.5));
    }

.tue_falling_loading::after {
      background: linear-gradient(to bottom, #33ccff, #ccff33);
      mask-image: radial-gradient(#fff, #000);
      clip-path: inset(100% 0px 0px -50px);
    }

@keyframes tue_falling_loading {
      0% {
        transform: translate3d(100px, 0px, 0px);
      }
      30% {
        transform: scale(1, 2);
      }
      70% {
        transform: scale(2, 0.5);
      }
      100% {
        transform: translate3d(-50px, 50px, 0px);
      }
    }

@keyframes tue_expanding_circle {
      0% {
        transform: scale(10%);
        mix-blend-mode: screen;
      }
      50% {
        transform: scale(150%);
        opacity: 0.5;
      }
      100% {
        transform: scale(50%);
      }
    }

.tue_falling_loading::after {
      animation: tue_expanding_circle 4s infinite, tue_falling_loading 2s infinite;
    }

Recomendado

Ejemplo de página web de portafolio

Barra de navegación CSS responsiva

Un código de Mikeykun

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS