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

Cet article partagera avec vous quatre 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.

Il y a deux jours, j'ai vu de bons effets d'animation de chargement provenant d'un site Web. Ils étaient écrits en CSS3 pur, alors j'ai essayé de les écrire moi-même en fonction des effets.

Avant de commencer, passons en revue quelques connaissances : la nouvelle animation d'images clés de CSS3 peut être utilisée pour implémenter de nombreuses animations. Nous pouvons utiliser animation-delay pour contrôler l'exécution retardée des animations afin d'obtenir des effets riches.

Lorsque la valeur de animation-delay est une valeur positive, l'animation sera retardée par rapport à l'état initial ;

Lorsque la valeur de animation-delay est un nombre négatif, l'animation sera avancé à partir de la valeur (La valeur absolue d'un nombre négatif) L'état correspondant démarre l'exécution.

(L'image de l'effet peut ne pas être claire, veuillez comprendre)

1. Le premier effet

.

Un total de 16 petits carrés, positionnez la position et modifiez la transparence du carré via des images clés

{animation: ball 2s 0s ease infinite;}
@keyframes ball {
      0%{
        opacity: 1;
      }
      50%{
        opacity: 1;
      }
      51%{
        opacity: 0;
      }
    }

Définissez la valeur du délai d'animation pour chaque carré, ici mon animation globale Le temps de consommation est de 2 s et la division égale de 16 carrés est de 0,125 s, donc la valeur de retard d'animation que j'ai définie commence à -1,875 s et augmente avec une différence numérique de 0,125 jusqu'à ce qu'elle atteigne 0.

2. Le deuxième effet

La position de la grosse boule au milieu reste inchangée, et les trois sur le côté Les petites boules sont contenues respectivement dans trois carrés. Définissez la position des petites boules {top:0;left:0;} et réglez le carré rotateZ pour qu'il pivote pour former cette intersection.

Définissez le processus d'animation via une animation par image clé (l'écriture de l'animation par image clé ci-dessous n'est pas la meilleure méthode) et définissez la valeur de retard d'animation pour chaque balle, de sorte que les trois balles puissent se déplacer à des moments différents. de l'avant.

{animation: turn_atom 1.5s 0s ease infinite;}
@keyframes turn_atom {
      0%{
        height:25px;
        width: 25px;
        top: 0;
        left: 0;
      }
      50%{
        height: 20px;
        width: 20px;
        top: 60px;
        left: 60px;
      }
      51%{
        height: 15px;
        width: 15px;
        top: 60px;
        left: 60px;
      }
      100%{
        height: 20px;
        width: 20px;
        top: 0;
        left: 0;
      }
    }

De plus, vous devez définir la valeur de l'index z pour le conteneur parent des trois petites boules via une animation par image clé pour obtenir l'effet visuel des petites boules tournant autour de la grosse boule.

{animation: turn_atomZ 1.5s 0s ease infinite;}
@keyframes turn_atomZ {
      0%{
        z-index: 6;
      }
      50%{
        z-index: 6;
      }
      51%{
        z-index: 4;
      }
    }

3. Le troisième effet

Cet effet est relativement simple, il suffit de changer la taille et la transparence de la boule (la transparence ainsi que la largeur et la hauteur de la boule sont initialement définies).

{animation: light 1.5s 0s ease infinite;}
@keyframes light {
      50%{
        opacity: 0.4;
        height: 15px;
        width: 15px;
      }
    }

4. Le quatrième effet

Initialement, les quatre boules sont positionnées à la même position, et la valeur gauche de la boule et la taille de la boule peuvent être modifiées via des images clés.

{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;}
@keyframes r_ball {
      50%{
        left: 100%;
      }
    }
    @keyframes r_ballZ {
      25%{
        transform: scale(0.5);
      }
      50%{
        transform: scale(1);
      }
    }

C'est tout pour l'instant, j'en ajouterai plus plus tard. (À suivre)

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. 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!