Frammento di animazione CSS con caricamento in caduta

640 byby.createsite

Apri nell'Editor Pubblica il Tuo Codice

Frammento di animazione CSS con caricamento in caduta

Consigliato

19 December 2025

Incorpora il gioco Unity Ragdoll.io: frammento di codice

22 March 2025

Un codice di gherhz

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

Frammento di animazione CSS con caricamento in caduta

Consigliato

Incorpora il gioco Unity Ragdoll.io: frammento di codice

Un codice di carab5256

Un codice di gherhz

HTML

CSS

JS

Consigliato

Incorpora il gioco Unity Ragdoll.io: frammento di codice

Un codice di carab5256

Un codice di gherhz

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS