Frammento di animazione di caricamento CSS

814 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Frammento di animazione di caricamento CSS

Consigliato

12 July 2025

Animazione del testo

HTML

CSS

/* Fundação CSS */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background:url("./thumb.jpg") no-repeat center center;
      background-color: black;
      background-size: cover;
      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%;
      max-width: 75%;
      width: 75%;
      height: 25%;
      top:15%;
      overflow-y: hidden;
      box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .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;
    }

/* Core da Animação */
    .loading-element {
      /* Propriedades básicas */
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #FFFFFF;
      animation: loading-animation 1s linear infinite;
    }

/* Animação principais */
    .sobe {
      position: relative;
      top: 0;
      animation: sobe 5s ease-in-out infinite;
    }

@keyframes loading-animation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
        background-color: #E6DB74;
      }
      100% {
        transform: scale(1);
      }
    }

@keyframes sobe {
      0% {
        transform: translateY(0%);
      }
      50% {
        transform: translateY(-20%);
      }
      100% {
        transform: translateY(0%);
      }
    }

Frammento di animazione di caricamento CSS

Consigliato

animazione

Simulatore di banca

Animazione del testo

HTML

CSS

JS

Consigliato

animazione

Simulatore di banca

Animazione del testo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS