Pure CSS3 réalise un effet d'animation de chargement de page (avec code)

Lors de l'ouverture d'une page, vous rencontrez souvent une situation de chargement de la page. En tant que développeur front-end, savez-vous comment utiliser CSS3 pour obtenir des effets d'animation de chargement de page ? Cet article partagera avec vous un code d'effet d'animation de chargement CSS3 sympa et pratique. Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.

Faire une animation de chargement de page nécessite l'utilisation de nombreux attributs en CSS3, tels que l'animation, l'affichage, les attributs de transformation, etc. Si vous n'êtes pas sûr, vous pouvez lire mes articles précédents que je les ai déjà présentés. , ou visitez le Tutoriel vidéo CSS3.

Exemple : Créez un effet de chargement d'animation en colonnes, avec les rayures passant de longues à courtes puis plus longues. Le code spécifique est le suivant :

Partie HTML :

<div class="box">
   <div class="r1"></div>
   <div class="r2"></div>
   <div class="r3"></div>
   <div class="r4"></div>
   <div class="r5"></div>
</div>

<.>Partie CSS :

.box {
    margin: 100px auto;
    width: 50px;
    height: 60px;
   }   
   .box>div {
    background-color: #67CF22;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
   }   
   .box .r2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
   }   
   .box .r3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
   }   
   .box .r4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
   }   
   .box .r5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
   }   
   @-webkit-keyframes stretchdelay {
    0%,
    40%,
    100% {
     -webkit-transform: scaleY(0.4)
    }
    20% {
     -webkit-transform: scaleY(1.0)
    }
   }   
   @keyframes stretchdelay {
    0%,
    40%,
    100% {
     transform: scaleY(0.4);
     -webkit-transform: scaleY(0.4);
    }
    20% {
     transform: scaleY(1.0);
     -webkit-transform: scaleY(1.0);
    }
   }

L'effet est comme indiqué dans l'image :

Le code partagé ci-dessus pour CSS3 pour obtenir un effet d'animation de chargement de page , qui est souvent utilisé dans les projets, vous pouvez l'utiliser directement, et j'espère que vous pourrez l'essayer vous-même pour voir si vous pouvez créer d'autres effets. J'espère que cet article vous sera utile ! Pour plus de didacticiels connexes, veuillez visiter le

Manuel en ligne CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!