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

Menú desplegable con CSS

Un código de Developer7

Fuente de baile

HTML

CSS

JS

Recomendado

Menú desplegable con CSS

Un código de Developer7

Fuente de baile

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS