HTML+CSS réalise un effet d'animation de chargement de page (chargement)

Avez-vous déjà rencontré une situation où la page se charge lors de la navigation sur la page ? En tant que développeur front-end, savez-vous comment utiliser CSS3 et HTML pour créer un effet d'animation de chargement de page ? Cet article partagera avec vous un code d'effet d'animation de chargement de cercle CSS3 super simple et pratique. Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.

Pour réaliser une animation de chargement, vous devez utiliser de nombreux attributs et balises HTML en CSS3, tels que : animation, affichage, coins arrondis du rayon de bordure, attribut de transformation, etc. Si vous n'êtes pas sûr, vous pouvez Consultez mes articles précédents, qui ont déjà été présentés, ou visitez le Tutoriel vidéo CSS3.

Exemple de démonstration : utilisez trois cercles pour créer un effet d'animation de chargement de page. Les cercles passent de masqués à apparaissant puis à masqués. Le code spécifique est le suivant :

Partie HTML :

<div class="spinner">
     <div class="bounce1"></div>
    <div class="bounce2"></div>
     <div class="bounce3"></div>
</div>

Partie CSS3 :

.spinner {
     margin: 100px auto 0;
     width: 150px;
     text-align: center;
   }
    
   .spinner > div {
     width: 30px;
     height: 30px;
     background-color: #67CF22;
    
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
     animation: bouncedelay 1.4s infinite ease-in-out;
     /* Prevent first frame from flickering when animation starts */
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
    
   .spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
   }
    
   .spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
   }
    
   @-webkit-keyframes bouncedelay {
     0%, 80%, 100% { -webkit-transform: scale(0.0) }
     40% { -webkit-transform: scale(1.0) }
   }
    
   @keyframes bouncedelay {
     0%, 80%, 100% {
       transform: scale(0.0);
       -webkit-transform: scale(0.0);
     } 40% {
       transform: scale(1.0);
       -webkit-transform: scale(1.0);
     }
   }

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

Ce qui précède présente CSS3 pour obtenir un effet d'animation de chargement de page La méthode est couramment utilisée dans les projets. Vous pouvez l'utiliser directement ou la modifier selon votre style préféré.

【Tutoriels associés recommandés】

1.

Tutoriel vidéo HTML2
Manuel en ligne CSS33. tutoriel bootstrap

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!