Animation de chargement CSS Structure HTML

63 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Animation de chargement CSS Structure HTML

Recommandé

15 March 2024

Entrée CSS animée

21 August 2025

Formulaire de connexion et d'inscription (HTML, CSS, JS)

27 September 2025

Arrière-plan animé CSS avec formes et texte

HTML

CSS

/* css_foundation */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background:url("./thumb.jpg") no-repeat center center;
      background-color: #1f1f1f;
      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;
    }

/* Sunday Blues */

.loading-element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #ff7f7f;
      animation: loading-animation 1s linear infinite;
    }

@keyframes loading-animation {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }

.error-1 {
      position: absolute;
      top: 60%;
      left: 45%;
      transform: translate(-20%, 0);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #ff7f7f;
      animation: error-1-animation 3s backwards;
    }

@keyframes error-1-animation {
      0% {
        transform: translate(-20%, 0) scale(1);
      }
      100% {
        transform: translate(-20%, 0) scale(0);
      }
    }

.error-2 {
      position: absolute;
      top: 50%;
      left: 40%;
      transform: translate(-20%, 0);
      width: 100px;
      height: 20px;
      background-color: #ff7f7f;
      animation: error-2-animation 3s backwards;
    }

@keyframes error-2-animation {
      0% {
        transform: translate(-20%, 0) scale(1);
      }
      100% {
        transform: translate(-20%, 0) scale(0);
      }
    }

/* Micro-detail that only appears on the 2nd playthrough */
    .detail {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      background-color: #fff;
      animation: detail-animation 3s backwards;
    }

@keyframes detail-animation {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        transform: translate(-50%, -50%) scale(0);
      }
    }

Recommandé

Entrée CSS animée

Formulaire de connexion et d'inscription (HTML, CSS, JS)

Arrière-plan animé CSS avec formes et texte

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS