Animation de chargement de la page d'apprentissage CSS3 (4)

Cet article partagera avec vous 6 types d'animations de chargement de page CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Dans l'article précédent [Animation de chargement de page pour apprendre CSS3 (3) ], j'ai partagé 6 autres animations de chargement CSS3 que je continuerai à partager aujourd'hui (le titre est la suite du. la fois précédente). Voir la photo.

Dix-sept, effet dix-sept

Trois les petites boules, centrées verticalement, avec un grand espacement, changent simplement la valeur de translation des petites boules à tour de rôle.

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }

Dix-huit, effet dix-huit

Trois petites boules, toutes centrées dans les directions horizontale et verticale, utilisent la marge extérieure pour augmenter la distance entre les petites boules. À partir de l'effet, les deux petites boules de gauche et de droite effectuent un mouvement circulaire autour de la boule du milieu. , alors nous pouvons directement laisser l'élément parent de la balle tourner pour obtenir l'effet environnant des balles des deux côtés (lorsque l'élément parent tourne, en raison de la forme ronde, la balle au milieu ne peut pas être vue en train de tourner, et la position au milieu ne changera pas, visuellement, la boule du milieu n'a apporté aucun changement).

@keyframes wind_ball {
      50% {
        transform: rotateZ(180deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

Dix-neuf, effet dix-neuf

Il y a cinq petites boules au total. L'animation exécutée par chaque petite boule est la même, mais le temps de retard de l'animation de chaque petite boule est différent, ce qui rend les positions des petites boules différentes. même position qu'Unify le point de départ (ici, je positionne uniformément les cinq boules à l'extrême droite)

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {
      80% {
        right: 75%;    //到达终点，开始返回起点      }
    }
@keyframes cool_ballS {
      80% {               //到达终点
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //开始返回起点，长度变大，宽度变小，模拟移动产生的形变
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到达起点
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢复初始
        width: 20px;
        height: 20px;
      } 
    }

Vingt, effet vingt

Un total de huit petites boules, positionnées en cercle, il suffit de changer la largeur et la hauteur des petites boules (pour conserver les changements des petites boules Il est basé sur le centre de la boule)

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }

(50% -80% de la boule maintient la largeur et la hauteur à 0, formant un effet à moitié visible et à moitié caché)

Vingt et un, effet vingt et un

Un total de trois heures. La trajectoire de chaque balle est toujours la même. Ici, j'ai positionné le centre des trois balles vers le haut verticalement et le centre horizontalement, puis je l'ai déplacé en trois étapes, d'abord vers le bas à droite. coin, puis dans le coin inférieur gauche, et enfin Retour au point de départ.

(À un moment proche du milieu de chaque étape, le changement de transparence est ajouté)

@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

Vingt-deux, effet vingt-deux

C'est similaire à un engrenage rotatif. La clé est de savoir comment créer la forme d'un engrenage, a Créez un cercle intérieur pour la bordure d'implémentation de p et créez une bordure extérieure irrégulière pour la bordure pointillée de la pseudo-classe de p. Plus la bordure de la pseudo-classe est large, plus les bords irréguliers sont clairsemés, et vice versa.

Maintenant que les engrenages sont fabriqués, il ne reste plus que le petit boîtier rotatif.

.gear_ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: inline-block;
      border: 4px #fff solid;
      position: relative;
    }

    .gear_ball:after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      top: -8px;
      left: -8px;
      border: 8px #fff dashed;
    }

Le partage d’aujourd’hui est terminé, il y aura une autre vague plus tard, et cela se terminera par des fleurs. J'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de didacticiels connexes, veuillez visiter le didacticiel vidéo de base CSS , didacticiel vidéo CSS3 , didacticiel bootstrap  !

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!