Fragmento de animación de carga descendente CSS

854 byby.createsite

Abrir en el editor Publica tu código

Fragmento de animación de carga descendente CSS

Recomendado

24 February 2024

Caja de color

27 May 2025

Tarjeta de pago

26 July 2025

Editor HTML en línea | CodeCanvas: herramienta gratuita para desarrollo web

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;
    }