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

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 (1) ], nous avons partagé quatre animations de chargement CSS3, et nous continuerons aujourd'hui (le titre continue de la fois précédente).

Veuillez noter : certaines animations d'images clés dans le code utilisent des courbes linéaires, tandis que d'autres utilisent des courbes d'aisance. Le premier est exécuté à une vitesse constante et toute l'animation est exécutée à une vitesse fixe ; la seconde a une phase d'accélération et de décélération, qui accélère au début de l'animation et décélère lorsque l'animation est sur le point de se terminer (par exemple, si je règle une animation à 50%, alors lorsqu'elle est sur le point d'atteindre 50% %, l'animation commence à ralentir, et lorsqu'elle dépasse 50%, l'animation commence à accélérer, ce qui se traduit par un effet de court séjour sur le page. Les effets sept et huit sont les plus évidents)

5. Effet cinq

L'effet du ballon qui monte les escaliers, c'est le premier effet que j'ai vu, je pensais que ce serait un peu compliqué, mais après l'avoir écrit, j'ai pensé que ce n'était pas si difficile.

Positionnez d'abord les escaliers dans le coin supérieur droit, effectuez une animation de mouvement du coin supérieur droit vers le coin inférieur gauche et définissez la valeur de retard d'animation pour chaque escalier (j'ai utilisé trois escaliers ici, avec une durée totale de 1,8s, animation- Les valeurs de retard sont respectivement de 0s, -0,6s, -12s)

{animation: step_mv 1.8s linear infinite;}<br>@keyframes step_mv {<br>      0%{<br>        right: 0;<br>        top: 0;<br>        opacity: 0.6;<br>      }<br>      50%{<br>        opacity: 1;<br>      }<br>      100%{<br>        right: 100%;<br>        top: 100%;<br>        opacity: 0.6;<br>      }<br>    }<br>

Deuxièmement, déterminez le point de contact entre le ballon et les escaliers. Le ballon utilisera ce contact. point comme référence la plus basse. En même temps, changez la position de la balle. La largeur et la hauteur pendant le processus de montée et de descente rendent la balle plus réaliste. Le temps de mouvement de l'animation de la balle est exactement le temps de retard de l'animation de l'escalier, afin de garantir que la balle puisse toucher chaque escalier.

{animation: jump .6s 0s ease infinite,jump_S .6s 0s ease infinite;}<br>@keyframes jump {<br>      50%{<br>        top: 60%;<br>      }<br>    }<br>    @keyframes jump_S {<br>      5%{<br>        height: 25px; //下降过程<br>        width: 15px;<br>      }<br>      54%{<br>        height: 20px;//到达底部<br>        width: 20px;<br>      }<br>      55%{<br>        height: 25px;//上升过程<br>        width: 15px;<br>      }<br>      98%{<br>        height: 20px;//到达顶点<br>        width: 20px;<br>      }<br>    }<br>

VI. Effet 6

Cet effet est relativement simple.

Un rectangle p, définissez la bordure et les coins arrondis, et définissez la couleur de l'une des bordures sur héritage (c'est-à-dire border-left/bottom/top/right-color:transparent) ; >De cette façon, l'élément parent n'a pas de couleur de bordure, donc la bordure de ce côté est incolore, formant un cercle avec un espace. Ensuite, définissez simplement l'animation de rotation et tout ira bien. (Le code ne sera pas publié)

7. Effet 7

La production de cette forme d'effet est la même que la méthode précédente, sauf que cette fois une bordure supplémentaire est ajoutée et elle est toujours tournée. Je n'entrerai pas dans plus de détails et je passerai simplement à l'image clé. code d'animation.

{animation: rotate_bors 2s ease infinite;}//大圆<br>{animation: rotate_bors 1s ease infinite;}//小圆@keyframes rotate_bors {<br>      50%{<br>        transform: rotateZ(180deg);<br>      }<br>      100%{<br>        transform: rotateZ(360deg);<br>      }<br>    }<br>

8. Effet 8

Cet effet est également très simple. Je n'entrerai pas dans les détails sur la façon de créer le grand cercle extérieur. Il vous suffit de modifier la taille du petit cercle intérieur.

{animation: rotate_borw 1s linear infinite;}@keyframes rotate_borw {<br>      50%{<br>        width: 15px;<br>        height: 15px;<br>      }<br>    }<br>

9. Effet 9

Définissez toutes les balles en tant qu'éléments de bloc en ligne, donnez à l'élément parent text-align: center pour centrer la balle horizontalement et définissez la hauteur de la ligne pour centrer la balle verticalement. Ensuite, utilisez l’animation d’images clés pour modifier la longueur, la largeur ainsi que les marges gauche et droite de la balle.

{animation: margin 1s linear infinite;}<br>    @keyframes margin {<br>      50%{<br>        margin:0 10px;<br>        width: 10px;<br>        height: 10px;<br>      }<br>    }<br>

Dix, effet dix

Définissez toujours la balle comme un bloc en ligne, centrez-la simplement horizontalement. Vous pouvez définir la marge pour ajuster la distance entre les balles et définir la valeur de translation de la balle via des images clés. (Le délai entre chaque boule ne doit pas nécessairement être réparti également, la différence peut être réduite)

(À suivre)

{animation: trans 1.2s ease infinite;}@keyframes trans {<br>      50%{<br>        opacity: 1;<br>        transform: translateY(30px);<br>      }<br>      70%{<br>        opacity: 1;<br>        transform: translateY(30px);<br>      }<br>      100%{<br>        opacity: 0;<br>        transform: translateY(60px);<br>      }<br>    }<br>

C’est tout ce que je partage 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!