A variety of loading animation sharing-HTML Tutorial-php.cn

A variety of loading animation sharing

零下一度

Release： 2017-07-26 17:40:30

Original

1523 people have browsed it

Various loading animation sharing:

##Effect twenty-three

##Two squares, The initial positioning is to the upper left (top: 0; left: 0;);

A complete movement is divided into four stages: in the first stage, the upper left moves to the upper right, rotated 90°, and the width and height are reduced; Two stages: move the upper right to the lower right, rotate 180°, and restore the width and height; the third stage, move the lower right to the lower left, rotate 270°, and reduce the width and height; the fourth stage, move the lower left to the upper left, rotate 360° , width and height reply.

The animation delay time difference is negative half of the animation time.

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

Copy after login

##Twenty-four, effect twenty-four

Similar to the beating effect of a flame, position the three square divs horizontally in the center, vertically at the bottom, and set the initial width and height to 0.

While moving upward, change the width and height of the square.

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

Copy after login

##Twenty-five, effect twenty-five

It’s very similar to the game I played when I was a kid - Pac-Man

The production of Pac-Man on the left: the width and height of the two divs are 0, and only Set the border and set the color attribute of the right border to transparent. The code and effect are as follows:

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

Copy after login

Pac-Man’s mouth has been made. For the remaining two divs, one rotates forward to the Z-axis and the other rotates in the opposite direction to the Z-axis, thus making the eating action.

The three small balls on the right are all set to move to the middle of the right side and move towards Pac-Man's mouth. Just adjust the animation time of the balls and Pac-Man appropriately.

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

Copy after login

##Twenty-six, effect twenty-six

The beating paper

The difficulty of this effect lies in how to create the effect of falling and deformation. it's actually really easy. First of all, you must understand that a square, as long as it is rotated by a multiple of 90 around the Z axis, will look exactly the same as the original image. Then it is very simple to create this effect. There is no need to consider adding a deformation effect to each corner. .

Deformation effect: This kind of deformation can be produced by changing the value of border-radius.

@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°结束一个周期，刚好和初始状态一模一样，那就直接重复执行动画即可      }}

Copy after login

The shadow effect is even better. Make a flat ellipse, box-shadow and add the shadow effect, and change the size at the right time.

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

Copy after login

##Twenty-seven, effect twenty-seven

A div and a pseudo class are created. The div is responsible for rotating, and the pseudo-class is responsible for changing the height. Each one performs its own duties.

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

Copy after login

##Twenty-eight, effect twenty-eight

The effect of the clock (my positioning seems not to be in the middle)The effect of the clock only uses one keyframe animation. That is to rotate 360°, just change the animation movement time of the two pointers.

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

Copy after login

In this series of animations, some pause effects are achieved by maintaining the state from a certain percentage to a certain percentage through key frame control. ; and some are achieved through motion curve ease.

Finished with flowers~spend the weekend~

The above is the detailed content of A variety of loading animation sharing. For more information, please follow other related articles on the PHP Chinese website!