Comment implémenter l'effet d'animation de chargement en CSS3

Aujourd'hui, nous allons vous apprendre à utiliser CSS3 pour créer un effet d'animation de chargement. Pourquoi devrions-nous utiliser Loadning pour créer des effets d'animation ? Laissez-nous vous donner un exemple. Je crois que toute votre confusion disparaîtra après l'avoir lu.

La première étape consiste à dessiner un petit chrysanthème statique.

sk-fading-circle {
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
}
 
<div class="sk-fading-circle">
  <div class="sk-circle"></div>
  … //为缩减篇幅省略中间10个div
  <div class="sk-circle"></div>
</div>

Le code est comme ci-dessus. Le chrysanthème statique est en fait 12 petits divs imbriqués dans un div externe. Le petit div est dessiné dans un cercle en utilisant border-radius et positionné au centre de la grille supérieure en utilisant margin: 0 auto;. Puisque les 12 petits divs sont positionnés de manière absolue, ils se chevauchent tous.

La deuxième étape consiste à étaler les 12 cercles qui se chevauchent.

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
… //节省篇幅，每个圆每隔30度递增旋转
.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}
 
<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  … //为缩减篇幅省略中间10个div
  <div class="sk-circle12sk-circle"></div>
</div>

Le code est comme ci-dessus, utilisez la rotation de transform pour faire pivoter chaque point afin de former une forme complète de chrysanthème. Si vous n'êtes pas familier avec la transformation, jetez un œil à l'image ci-dessous. Le deuxième point pivote de 30 degrés. La rotation des autres points peut être déterminée par vous-même :

La troisième étape consiste à contrôler la transformation. attribut d'opacité via l'animation pour faire apparaître et disparaître chaque point

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
.sk-fading-circle .sk-circle:before {
  ……
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

afin que chaque point clignote de manière synchrone comme un feu de circulation.

La dernière étape consiste à définir le délai d'animation pour chaque point afin d'échelonner le temps de clignotement pour former l'effet de rotation du chrysanthème commun

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }
.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }
.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }
… //为缩减篇幅省略中间代码
.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

Parce qu'il y a 12 points, l'intervalle de clignotement de chaque point dure 0,1 s, donc le premier point n'a pas de délai d'animation et clignote immédiatement. Le deuxième point commence à clignoter à partir de -1,1 s (si vous ne comprenez pas les nombres négatifs, veuillez vous référer à l'article sur l'animation, ce qui signifie qu'il commence à partir de ce point temporel et que l'effet d'animation précédent n'est pas affiché). Après cela, chaque point est retardé par incréments de 0,1 s. Enfin, l'effet de chargement commun qui tourne le chrysanthème est formé

Grâce à cette étude de cas, je pense que vous maîtrisez parfaitement comment utiliser Loadning pour créer des effets d'animation. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture connexe :

Comment utiliser la toile pour réaliser l'interaction entre la balle et la souris

Comment utiliser la toile pour créer l'effet de l'animation de la fontaine de particules

css3 cliquez pour afficher les effets d'entraînement

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!