Comment utiliser CSS3 pour créer une animation de chargement de cercle de page (avec code)

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

La création d'animations de chargement de page nécessite l'utilisation de nombreux attributs en CSS3, tels que les attributs d'animation, le positionnement, les congés de bordure, les attributs de transformation, etc. Si vous n'êtes pas clair, vous pouvez consulter mes articles précédents qui ont été présenté auparavant, ou visitez le Tutoriel vidéo CSS3 Ce sont les bases et doivent être maîtrisées.

Exemple : Créez un effet d'animation de chargement de cercle Lors du chargement, la taille du cercle passe de petite à grande et la couleur passe de clair à foncé. Le code spécifique est le suivant :

Partie HTML :

<div class="loader">
      <div class="loading">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>     
      </div>
  </div>

Partie CSS :

.loader{
       width: 300px;
       border: 1px solid #ccc;
       height: 200px;
       display: flex;
       box-sizing: border-box;
       align-items: center;
       justify-content: center;
   }   
   @-webkit-keyframes loading{
       50%{
           transform: scale(0.4);
           opacity: 0.3;
       }
       100%{
           transform: scale(1);
           opacity: 1;
       }
   }
   .loading{
       position: relative;
   }
   .loading i{
       display: block;
       width: 15px;
       height: 15px;
       border-radius: 50%;
       position: absolute;
       background: #333;
   }
   .loading i:nth-child(1){
       top: 25px;
       left: 0;
       -webkit-animation: loading 1s ease 0s infinite;
   }
   .loading i:nth-child(2){
       top: 17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.12s infinite;
   }
   .loading i:nth-child(3){
       top: 0;
       left: 25px;
       -webkit-animation: loading 1s ease 0.24s infinite;
   }
   .loading i:nth-child(4){
       top: -17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.36s infinite;
   }
   .loading i:nth-child(5){
       top: -25px;
       left: 0;
       -webkit-animation: loading 1s ease 0.48s infinite;
   }
   .loading i:nth-child(6){
       top: -17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.6s infinite;
   }
   .loading i:nth-child(7){
       top: 0;
       left: -25px;
       -webkit-animation: loading 1s ease 0.72s infinite;
   }
   .loading i:nth-child(8){
       top: 17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.84s infinite;   
   }

Rendu :

Le partage ci-dessus

Code CSS3 pour obtenir un effet d'animation de chargement de page, il est beaucoup utilisé dans les projets et peut être utilisé directement. J'espère que vous pourrez l'essayer vous-même et 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 Tutoriel vidéo CSS

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!