Maison > Article > interface Web > 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:174264parcourir

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 infinie

animation: 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

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!

html5 css3 html count 循环 function 选择器 transform animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelle est l'utilisation du sélecteur de focus en CSSArticle suivant：Quelle est l'utilisation du sélecteur de focus en CSS

Articles Liés

Voir plus