CSS implémente des effets d'animation créatifs de chargement de page (chargement)-tutoriel CSS-php.cn

CSS implémente des effets d'animation créatifs de chargement de page (chargement)

yulia

Libérer： 2018-10-20 10:48:38

original

3682 Les gens l'ont consulté

Avez-vous déjà rencontré la page « Chargement, veuillez patienter » lors de la navigation sur le site Web ? En tant qu'ingénieur front-end, pouvez-vous utiliser CSS pour créer des effets d'animation de chargement (chargement) de page ? Cet article partagera avec vous un code d'animation de chargement (chargement) de page créative, qui a une certaine valeur de référence. Les amis intéressés peuvent y jeter un œil.

Réaliser une animation de chargement (loading) de page créative nécessite l'utilisation de nombreux attributs en CSS, tels que : animation animation, attribut de transformation, etc. Si vous n'êtes pas sûr, vous pouvez vous référer aux informations pertinentes sur le Article du site Web PHP en chinois, ou visitez le Tutoriel vidéo CSS.

Description de l'instance : utilisez div pour créer un effet de page de chargement de carré créatif Pendant le processus de chargement, le carré se retourne le long de l'axe Y, puis se retourne le long de l'axe X. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .spinner {
    width: 60px;
    height: 60px;
    background-color: #67CF22;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
   }
   
   @-webkit-keyframes rotateplane {
    0% {
     -webkit-transform: perspective(120px)
    }
    50% {
     -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
     -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
   }
   
   @keyframes rotateplane {
    0% {
     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
   }
  </style>
 </head>
 <body>
  <div class="spinner"></div>
 </body>
</html>

Copier après la connexion

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

CSS implémente des effets danimation créatifs de chargement de page (chargement)

Ce qui précède a partagé avec vous un code d'effet de page de chargement (chargement) carré créatif. Il est relativement. simple et les débutants peuvent le pratiquer par eux-mêmes. Voyez si vous pouvez obtenir l'effet d'animation du chargement de la page. J'espère que cet article vous sera utile !

【Tutoriels associés recommandés】

1. Tutoriel vidéo CSS3
2 Tutoriel vidéo HTML
3. 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!