Une variété de partage d'animation de chargement

Une variété de partage d'animations de chargement :

Effet vingt-trois

Deux carrés, L'initiale le positionnement est en haut à gauche (en haut : 0 ; à gauche : 0 ;

Un mouvement complet est divisé en quatre étapes : dans la première étape, le coin supérieur gauche se déplace vers le haut à droite, tourné de 90°, et la largeur et la hauteur sont réduites ; Deux étapes : déplacez le coin supérieur droit vers le bas à droite, faites pivoter de 180° et restaurez la largeur et la hauteur, déplacez le coin inférieur droit vers le bas à gauche, faites pivoter de 270° et réduisez ; la largeur et la hauteur ; la quatrième étape, déplacez le coin inférieur gauche vers le haut à gauche, faites pivoter à 360 °, répondez en largeur et en hauteur.

La différence de temps de retard d'animation est la moitié négative du temps d'animation.

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

Vingt-quatre, effet vingt-quatre

Semblable à l'effet battant d'une flamme, positionnez les trois div carrés pour qu'ils soient centrés horizontalement, verticalement en bas, et la largeur et la hauteur initiales sont définies à 0.

Tout en montant, modifiez la largeur et la hauteur du carré.

{animation: fire_ball 1.5s linear infinite;}@keyframes fire_ball {  50% {
        height: 30px;width: 30px;top: 50%;
      }  100% {height: 0;width: 0;top: 0;
      }}

Vingt-cinq, effet vingt-cinq

C'est très similaire au jeu auquel je jouais quand j'étais enfant - Pac-Man

La production de Pac-Man sur le gauche : la largeur et la hauteur des deux div sont 0 , définissez uniquement la bordure et définissez l'attribut color de la bordure droite sur transparent. Le code et l'effet sont les suivants :

.

.pac_head {  border: 25px solid #fff;  border-right-color: transparent;  border-radius: 50%;
    }

La bouche de Pac-Man a été C'est fait. Les deux divs restants sont celui qui tourne vers l'avant sur l'axe Z et celui qui tourne dans le sens opposé de l'axe Z, et l'action de manger est effectuée.

Les trois petites boules à droite sont toutes prêtes à se déplacer vers le milieu du côté droit et à se diriger vers la bouche de Pac-Man. Ajustez simplement le temps d'animation des boules et de Pac-Man en conséquence.

@keyframes pac_ball {  100% {
        right: 55%;
      }}

Vingt-six, effet vingt-six

Papier à sauter

La difficulté de cet effet réside dans la manière de créer l'effet de chute et de déformation. C'est en fait très simple. Tout d’abord, vous devez comprendre qu’un carré, tant qu’il pivote autour de l’axe Z d’un multiple de 90, aura exactement le même aspect que l’image originale. Il n’y a alors pas de création d’effet très simple. Il faut envisager d'ajouter un effet de déformation à chaque coin.

Effet de déformation : changez simplement la valeur de border-radius pour produire ce type de déformation.

@keyframes beat_ball {  25% {
        transform: translateY(25%) rotate(22.5deg);//下落border-bottom-right-radius: 10%;
      }  50% {border-bottom-right-radius: 100%;transform: translateY(50%) scale(1, 0.8) rotate(45deg)   //scale，是为了让形变看起来有弹性      }  75% {transform: translateY(25%) rotate(67.5deg)   //上升      }  100% {transform: translateY(0) rotate(90deg)        //旋转90°结束一个周期，刚好和初始状态一模一样，那就直接重复执行动画即可      }}

L'effet d'ombre est encore meilleur. Créez une ellipse plate, faites une ombre en boîte et ajoutez l'effet d'ombre, et changez la taille au bon moment.

@keyframes beat_shadow {  50%{
        transform: scale(1.25,0.8);
      }}

Vingt-sept, effet vingt-sept

Un div et une pseudo classe sont créés.

La div est responsable de la rotation, et la pseudo-classe est responsable du changement de hauteur. Chacun accomplit ses propres tâches.

@keyframes locker_ball {           //div旋转
      25%{
        transform: rotateZ(180deg);
      }  50%{transform: rotateZ(180deg);
      }  75%{transform: rotateZ(360deg);
      }  100%{transform: rotateZ(360deg);
      }}
    @keyframes locker_ballh {     //伪类高度改变
      25%{
        height: 40px;
      }  50%{height: 0;
      }  75%{height: 0;
      }  100%{height: 40px;
      }}

Vingt-huit, effet vingt-huit

L'effet de l'horloge (mon positionnement ne semble pas être au milieu)

L'effet de l'horloge se fait à l'aide une seule animation d'image clé Oui, c'est-à-dire une rotation à 360°, il suffit de changer le temps de mouvement de l'animation des deux pointeurs.

@keyframes clock {  100%{
        transform: rotateZ(360deg);
      }}

Dans cette série d'animations, certains effets de pause sont maintenus d'un certain pourcentage à un certain pourcentage grâce au contrôle des images clés. L'état est atteint et certains le sont grâce à la facilité de la courbe de mouvement.

Fini avec des fleurs~passez le week-end~

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!