Webleb - Snippet di Codice - Frammento di animazione di caricamento CSS

HTML

CSS

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

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

/* layers */
    .loading-element {
      /* cor principal do fundo */
      background: #f0f0f0;
      /* tamanhos base */
      width: 5vw;
      height: 5vh;
      /* efeitos */
      aspect-ratio: 9/16;
      border-radius: 50%;
      animation: loading-animation 1s linear infinite;
    }

@keyframes loading-animation {
      to {
        transform: rotateZ(360deg);
        box-shadow: -5vw 5vh 10vw rgba(0, 0, 0, 0.5);
      }
    }

/* micro detalhes */
    @keyframes loading-animation-infinite {
      from {
        box-shadow: -5vw 5vh 10vw rgba(0, 0, 0, 0.5);
      }
      to {
        box-shadow: -5vw 5vh 20vw rgba(0, 0, 0, 0.5);
      }
    }

.loading-element::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent transparent transparent rgba(0, 0, 0, 0.5);
      border-width: 2vh 2vh 2vh 0;
      animation: loading-animation-infinite 1s linear infinite;
    }

/* interdependente */
    @keyframes moving-ripple {
      from {
        transform: translateX(-5vw);
      }
      to {
        transform: translateX(5vw);
      }
    }

.moving-ripple {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5vw;
      height: 5vh;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      animation: moving-ripple 2s linear infinite;
    }

.moving-ripple::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5vw;
      height: 5vh;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      animation: moving-ripple 2s linear infinite;
    }

/* cores e efeitos */
    .loading-element:hover {
      background: rgba(255, 255, 255, 0.5);
      box-shadow: 0 0 5vw rgba(0, 0, 0, 0.5);
    }

.loading-element:hover::after {
      border-width: 2vh 6vh 2vh 0;
    }

Frammento di animazione di caricamento CSS

Consigliato

Un codice di mabsolinfotech

codice di ballo

Un codice di Metehan

HTML

CSS

JS

Consigliato

Un codice di mabsolinfotech

codice di ballo

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS