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

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 d'apprentissage CSS3 (2) ], j'ai partagé 6 autres animations de chargement CSS3 que je continuerai à partager aujourd'hui (le titre est la suite du précédent. temps). Voir les photos Pas vraiment.

Onze, Effet Onze

Le quatre petites boules sont contenues respectivement dans quatre carrés p. Positionnez la petite boule par rapport au carré (en haut : 0 ; à gauche : 0). Réglez la rotation du carré p pour que les petites boules soient situées respectivement aux quatre coins. utilisez l'animation par image clé pour contrôler les petites boules. La boule se déplace d'avant en arrière entre la position actuelle et la position proche du point central

{animation: flor_move 1s 0s ease infinite;}
@keyframes flor_move {      50%{
        top: 25px;
        left: 25px;
      }
    }

Il reste encore un effet de rotation, qui est laissé au élément parent du carré p

{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote {
      25%{
        transform: rotateZ(90deg);
      }
      50%{
        transform: rotateZ(180deg);
      }
      75%{
        transform: rotateZ(270deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }

Douze, effet douze

Cet effet est difficile à réaliser Difficile, il suffit de fixer la position des neuf boules et de changer la transparence des boules (chaque boule doit définir un temps d'animation différent)

@keyframes mar_ligt {
      50%{
        opacity: 0.4;
      }
    }

Treize. Effet Treize

Il y a encore neuf petites boules , mais la taille des boules a été modifiée ici, afin d'éviter qu'en raison du changement de taille, la disposition soit désordonnée, donc chaque boule est incluse dans p avec une largeur et une hauteur fixes, de sorte que la boule soit toujours centrée dans les directions horizontale et verticale de p. De cette façon, vous pouvez modifier en toute sécurité la taille de la balle (chaque balle est toujours réglée sur une durée d'animation différente)

@keyframes mar_ligts {
      50%{
        transform: scale(.5);
        opacity: 0.4;
      }
    }

Quatorze, effet quatorze

Effet billard, quatre petites boules sont disposées horizontalement et verticalement au centre, les deux petites boules du milieu font ne bougent pas, les côtés gauche et droit. Les petites boules se déplacent d'avant en arrière des deux côtés (faites juste attention au décalage horaire du mouvement).

{animation: poolball_l 1s .5s linear infinite;}   //左边的小球
{animation: poolball_r 1s 0s linear infinite;}    //右边的小球@keyframes poolball_l {
      25%{
        transform: translateX(-100%);
      }
      50%{
        transform: translateX(0);
      }
    }
    @keyframes poolball_r {
      25%{
        transform: translateX(100%);
      }
      50%{
        transform: translateX(0);
      }
    }

Quinze, effet quinze

Il s'agit d'un effet très courant. De même, afin d'éviter toute confusion dans la mise en page due aux changements de taille de la balle, une couche de p avec une largeur et une hauteur fixes est ajoutée à l'extérieur de la balle.

Un délai d'animation est également défini pour chaque balle

{animation: size_change 1.2s linear infinite;}@keyframes size_change {
      20%{
        width: 0;
        height: 0;
      }
      40%{
        width: 0;
        height: 0;
      }
      50%{
        width: 20px;
        height: 20px;
      }
    }

Seize, Effet Seize

Cinq petites boules, centrez-les simplement horizontalement, utilisez les marges extérieures pour augmenter la distance entre les petites boules et changez les petites boules via l'animation d'image clé TranslateY, comme ainsi que la largeur, la hauteur et la transparence.

La largeur et la hauteur initiales de la balle sont de 15 px et la transparence est de 0,6.

{animation: flip_ballP 1.2s ease infinite,flip_ballS 1.2s ease infinite;}@keyframes flip_ballP {
      50%{
        transform: translateY(60px);
      }
    }
    @keyframes flip_ballS {
      50%{
        height: 15px;
        width: 15px;
        opacity: 0.6;
      }
      75%{
        height: 20px;
        width: 20px;
        opacity: 1;
      }
    }

À suivre !

Je vais le partager ici aujourd’hui, il y en aura d’autres plus tard. 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!