Webleb - Extraits de Code - Extrait d'animation de chargement 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;
    }

Extrait d'animation de chargement CSS

Recommandé

Un code par hamzanramzan034

Clone de Pinterest

Liste des cartes d'entreprise avec image de marque et marketing

HTML

CSS

JS

Recommandé

Un code par hamzanramzan034

Clone de Pinterest

Liste des cartes d'entreprise avec image de marque et marketing

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS