Animazione di caricamento CSS Struttura HTML

433 byby.createsite

Apri nell'Editor Pubblica il Tuo Codice

Animazione di caricamento CSS Struttura HTML

Consigliato

16 September 2025

Carosello di carte 3D HTML CSS JavaScript

27 April 2025

Un codice di Metehan

4 September 2025

Frammento HTML di animazione della porta della stanza CSS

HTML

CSS

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

body {
      background:url("./thumb.jpg") no-repeat center center;
      background-color: #0b0b0b;
      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;
    }

.loading-element {
      width: 20%;
      height: 80%;
      background-color: #333;
      border-radius: 50%;
      animation: loading-animation 1s linear infinite;
      position: relative;
    }

.layer-1 {
      width: 100%;
      height: 0;
      background-color: #555;
      position: absolute;
      bottom: 0;
      animation: pulse 2s ease-out;
      transform-origin: center bottom;
    }

.layer-2 {
      width: 90%;
      height: 70%;
      background-color: #777;
      position: absolute;
      bottom: 20%;
      left: 5%;
      animation: wave 4s ease-in-out;
      transform-origin: center bottom;
    }

.layer-3 {
      width: 80%;
      height: 60%;
      background-color: #999;
      position: absolute;
      bottom: 40%;
      left: 10%;
      animation: ripple 3s ease-out;
      transform-origin: center bottom;
    }

.loading-element::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10%;
      height: 20%;
      background-color: #000;
      border-radius: 50%;
      box-shadow: 0 0 10px #000;
      animation: zoom 2s ease-out;
    }

.loading-element::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5%;
      height: 10%;
      background-color: #000;
      border-radius: 50%;
      box-shadow: 0 0 5px #000;
      animation: pulse-out 2s ease-out;
      animation-delay: 1s;
    }

@keyframes loading-animation {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(2);
      }
    }

@keyframes pulse {
      0% {
        height: 0;
      }
      20% {
        height: 10%;
      }
      40% {
        height: 20%;
      }
      60% {
        height: 15%;
      }
      80% {
        height: 10%;
      }
      100% {
        height: 0;
      }
    }

@keyframes wave {
      0% {
        transform: scaleY(0);
      }
      20% {
        transform: scaleY(1.2);
      }
      40% {
        transform: scaleY(0.9);
      }
      60% {
        transform: scaleY(1.1);
      }
      80% {
        transform: scaleY(0.8);
      }
      100% {
        transform: scaleY(0);
      }
    }

@keyframes ripple {
      0% {
        transform: scale(0);
      }
      20% {
        transform: scale(1.2);
      }
      40% {
        transform: scale(0.9);
      }
      60% {
        transform: scale(1.1);
      }
      80% {
        transform: scale(0.8);
      }
      100% {
        transform: scale(0);
      }
    }

@keyframes zoom {
      0% {
        width: 5%;
        height: 10%;
        box-shadow: 0 0 5px #000;
      }
      100% {
        width: 10%;
        height: 20%;
        box-shadow: 0 0 10px #000;
      }
    }

@keyframes pulse-out {
      0% {
        height: 5%;
        width: 5%;
      }
      100% {
        height: 0%;
        width: 0%;
      }
    }

Consigliato

Carosello di carte 3D HTML CSS JavaScript

Un codice di Metehan

Frammento HTML di animazione della porta della stanza CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS