Implémentation de l'effet de lecture par animation CSS3

La dernière fois, j'ai partagé quatre animations de chargement CSS3, et nous continuons aujourd'hui (le titre continue de la fois précédente).

Démo en ligne : http://liyunpei.xyz/loading.html (mise à jour continuellement)

Veuillez noter : certaines des animations d'images clés dans le code utilisent une courbe linéaire , et certains utilisent la courbe de facilité. 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 de la balle qui monte les escaliers, Quand j'ai vu cet effet pour la première fois, j'ai pensé que ce serait un peu compliqué, mais après l'avoir écrit, j'ai pensé que ce n'était pas le cas 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 0s, -0,6s, -12s)

{:;:;:;
      }{:;
      }{:;:;:;
      }

Deuxièmement, déterminez le point de contact entre le ballon et les escaliers. La balle utilisera ce point de contact comme repère le plus bas. Dans le même temps, la modification de la largeur et de la hauteur de la balle lors de sa montée et de sa descente rendra 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;}@keyframes jump {  50%{
        top: 60%;
      }}
    @keyframes jump_S {  5%{
        height: 25px; //下降过程width: 15px;
      }  54%{height: 20px;//到达底部width: 20px;
      }  55%{height: 25px;//上升过程width: 15px;
      }  98%{height: 20px;//到达顶点width: 20px;
      }}

6. Effet 6

Cet effet est relativement simple.

Un div rectangulaire, 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 accédez simplement au code d'animation des images clés.

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

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 changer la taille du petit cercle à l'intérieur.

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

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;}@keyframes margin {  50%{
        margin:0 10px;width: 10px;height: 10px;
      }}

Dix. Effet 10

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 les balles via des images clés. La valeur de. traduireY. (Le délai entre chaque boule ne doit pas nécessairement être réparti également, la différence peut être réduite)

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

(À suivre)

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!