Comment obtenir un effet de chargement de page avec CSS3-tutoriel CSS-php.cn

Comment obtenir un effet de chargement de page avec CSS3

清浅

Libérer： 2021-04-20 15:13:38

original

4306 Les gens l'ont consulté

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.

Comment obtenir un effet de chargement de page avec CSS3

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 infinie

animation: load 1.4s infinite ease-in-out;

Copier après la connexion

(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>

Copier après la connexion

[Cours recommandés : Tutoriel CSS3 】

Rendu

Comment obtenir un effet de chargement de page avec CSS3

Rendu dynamique

Comment obtenir un effet de chargement de page avec CSS3

Résumé : Ce qui précède est tout le contenu de cet article. Grâce au contenu de cet article, j'espère que vous aurez une certaine compréhension de l'animation CSS3 et serez en mesure de créer votre style de chargement de page préféré.

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!