Maison >interface Web >tutoriel CSS >Comment obtenir un effet de chargement de page avec CSS3
Comment obtenir un effet de chargement de page avec CSS3
- 清浅original
- 2018-11-29 13:54:174308parcourir
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;(2) Attribut animation-fill-mode aucun : ne modifie pas le comportement par défaut. forwards : Lorsque l'animation est terminée, conservez la dernière valeur d'attribut (définie dans la dernière image clé). en arrière : applique la valeur de la propriété de début (définie dans la première image clé) avant que l'animation ne soit affichée pendant une période de temps spécifiée par animation-delay. les deux : les modes de remplissage avant et arrière sont appliqués. (3) transformation : transformation d'échelle (x, y) 2D.
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 】
Rendu
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!