Webleb - fragmentos de código - Animación de carga CSS Estructura HTML

HTML

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

.loading-element {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #E6DB74;
    animation: loading-animation 1s linear infinite;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 50px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 255, 255, 0.5);
  }

@keyframes loading-animation {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.5;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

@keyframes fragment-disappearance {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

.fragment-1 {
    position: relative;
    width: 80px;
    height: 100px;
    border-radius: 10px;
    background-color: #66D9EF;
    transform: rotate(25deg);
    animation: fragment-animation 3s linear infinite;
  }

@keyframes fragment-animation {
    0% {
      transform: rotate(25deg) scale(1);
      bottom: -100px;
    }
    20% {
      transform: rotate(25deg) scale(1.5);
      bottom: 150px;
    }
    40% {
      transform: rotate(25deg) scale(1);
      bottom: -100px;
    }
    60% {
      transform: rotate(25deg) scale(0.5);
      bottom: -150px;
    }
    100% {
      transform: rotate(25deg) scale(1);
      bottom: -100px;
    }
  }

@keyframes fragment-disappearance {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

.fragment-2 {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: 10px;
    background-color: #F92672;
    transform: rotate(-30deg);
    animation: fragment-animation-2 2s linear infinite;
  }

@keyframes fragment-animation-2 {
    0% {
      transform: rotate(-30deg) scale(1);
      bottom: -80px;
    }
    20% {
      transform: rotate(-30deg) scale(1.2);
      bottom: 50px;
    }
    40% {
      transform: rotate(-30deg) scale(1);
      bottom: -80px;
    }
    60% {
      transform: rotate(-30deg) scale(0.8);
      bottom: -130px;
    }
    100% {
      transform: rotate(-30deg) scale(1);
      bottom: -80px;
    }
  }

.fragment-3 {
    position: relative;
    width: 150px;
    height: 60px;
    border-radius: 10px;
    background-color: #3E8E41;
    transform: rotate(45deg);
    animation: fragment-animation-3 4s linear infinite;
  }

@keyframes fragment-animation-3 {
    0% {
      transform: rotate(45deg) scale(1);
      bottom: -60px;
    }
    25% {
      transform: rotate(45deg) scale(1.1);
      bottom: 30px;
    }
    50% {
      transform: rotate(45deg) scale(1);
      bottom: -60px;
    }
    75% {
      transform: rotate(45deg) scale(0.9);
      bottom: -120px;
    }
    100% {
      transform: rotate(45deg) scale(1);
      bottom: -60px;
    }
  }

.loading-element::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #E6DB74;
    animation: fragment-disappearance 5s linear infinite;
  }

Animación de carga CSS Estructura HTML

Recomendado

Un código de youssefdahroug2005

Un código de webleb

Un código de andres.stahr

HTML

CSS

JS

Recomendado

Un código de youssefdahroug2005

Un código de webleb

Un código de andres.stahr

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS