Extrait d'animation de chargement CSS

939 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 May 2025

social moderne

24 May 2024

Animations de cartes

28 October 2025

Exemple de curseur de blog Swiper

HTML

CSS

/* Fundação 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;
    }

/* Core da Animação */
    .loading-element {
      /* Propriedades básicas */
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #FFFFFF;
      animation: loading-animation 1s linear infinite;
    }

/* Animação principais */
    .sobe {
      position: relative;
      top: 0;
      animation: sobe 5s ease-in-out infinite;
    }

@keyframes loading-animation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
        background-color: #E6DB74;
      }
      100% {
        transform: scale(1);
      }
    }

@keyframes sobe {
      0% {
        transform: translateY(0%);
      }
      50% {
        transform: translateY(-20%);
      }
      100% {
        transform: translateY(0%);
      }
    }