Méthode CSS3 pour obtenir l'effet de chargement de page : créez d'abord un exemple de fichier HTML ; puis créez un div dans le corps ; obtenez enfin l'effet de chargement de page grâce à l'animation et à la conversion de mise à l'échelle 2D dans la transformation.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Nous pouvons créer l'animation du chargement de la page sous différentes formes. Le cas que nous souhaitons partager aujourd'hui est de donner à l'animation une forme circulaire pour charger la page. Lorsque vous utilisez l'animation, faites attention aux problèmes de compatibilité du navigateur<.>
Explication détaillée des points de connaissance
(1) animation : définir les attributs de l'animation animation-name : définir le nom de l'image clé qui doit être lié au sélecteur. Cet exemple est destiné à charger animation-duration : le temps nécessaire pour terminer l'animation, en secondes ou millisecondes. fonction d'animation-timing : courbe de vitesse d'animation. animation-delay : Le délai avant le début de l'animation. animation-iteration-count : Le nombre de fois que l'animation doit être jouée. animation-direction : Indique si l'animation doit être jouée à l'envers à tour de rôle. Exemple : Définir le nom de l'animation à charger, le temps nécessaire pour terminer l'animation est de 1,4 s, démarrer et terminer à basse vitesse, jouer en boucle infinieanimation: load 1.4s infinite ease-in-out;
Code complet
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .load { margin:300px auto; width: 150px; text-align: center; } .load div{ width: 30px; height: 30px; background-color:rgb(118,224,250); border-radius: 100%; display: inline-block; -webkit-animation: load 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; } .load .circle1 { -webkit-animation-delay: -0.32s; } .load .circle2 { -webkit-animation-delay: -0.16s; } @-webkit-keyframes load { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } </style> </head> <body> <div class="load"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> </body> </html>
[Cours recommandés : Tutoriel CSS3 】
RenduCe 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!