chargement de la collection d'animations

Les quatre petites boules sont contenues respectivement dans quatre divs carrés, et les petites boules sont par rapport au positionnement du carré (en haut : 0 ; à gauche : 0), faites pivoter le div carré de sorte que les boules soient situées aux quatre coins, puis utilisez l'animation d'images clés pour contrôler la boule pour qu'elle se déplace d'avant en arrière entre la position actuelle et une 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 à gauche, qui est laissé à l'élément parent du div carré

{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);
      }}

Cet effet n'est pas difficile à obtenir. Il suffit de fixer les neuf petites boules en position. et changez la transparence des petites boules (chaque petite boule La boule doit définir des temps d'animation différents)

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

Il y a encore neuf petites boules, mais la taille des petites boules a été modifiée ici afin d'éviter que la disposition ne soit désordonnée à cause du changement de taille. , chaque petite boule est incluse dans un div avec une largeur et une hauteur fixes, afin que les petites boules puissent être alignées horizontalement dans le div. Toujours centrées verticalement. 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;
      }}

Effet piscine, quatre petites boules sont disposées au milieu horizontalement et verticalement, les deux petites boules du milieu ne bougent pas, et les petites boules à gauche et à droite, déplacez-vous d'avant en arrière des deux côtés (faites simplement attention au décalage horaire entre les exercices).

{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);
      }}

C'est un problème très courant Le même effet, afin d'éviter toute confusion dans la mise en page due aux changements de taille de la balle, ajoute une couche de div de largeur et de hauteur fixes à l'extérieur de la balle.

Définissez également le délai d'animation 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;
      }}

Cinq petites boules, centrez-les simplement horizontalement, utilisez des marges pour augmenter la distance entre les boules et modifiez la translation, la largeur, la hauteur et la transparence des boules grâce à une animation d'images clés.

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;
      }}

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!