Animation de chargement CSS Structure HTML

842 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Animation de chargement CSS Structure HTML

Recommandé

18 October 2025

Exemple HTML de bouton de survol arc-en-ciel

27 January 2026

Ultimate Game Stash HTML : Interface utilisateur de l'émulateur de jeux

18 June 2025

ascension de montagne

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

Recommandé

Exemple HTML de bouton de survol arc-en-ciel

Ultimate Game Stash HTML : Interface utilisateur de l'émulateur de jeux

ascension de montagne

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS