loading animation collection-HTML Tutorial-php.cn

loading animation collection

零下一度

Release： 2017-07-24 10:12:08

Original

2117 people have browsed it

The four small balls are contained in four square divs respectively, and the small balls are relative to Square positioning (top: 0; left: 0), rotate the square div so that the balls are located at the four corners, and then use keyframe animation to control the ball to move back and forth between the current position and a position close to the center point

{animation: flor_move 1s 0s ease infinite;}
@keyframes flor_move {      50%{
        top: 25px;
        left: 25px;
      }
    }

Copy after login

There is still a rotation effect left, which is given to the parent element of the square div

{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote {  25%{
        transform: rotateZ(90deg);
      }  50%{transform: rotateZ(180deg);
      }  75%{transform: rotateZ(270deg);
      }  100%{transform: rotateZ(360deg);
      }}

Copy after login

##This effect is not difficult to achieve. Just fix the nine balls in position and change the transparency of the balls (each ball must be set differently. Same animation time)

@keyframes mar_ligt {  50%{
        opacity: 0.4;
      }}

Copy after login

still nine Small balls, but the size of the small balls is changed here. In order to prevent the layout from being messed up due to the change in size, each small ball is included in a div with a fixed width and height, so that the small ball is always centered in the horizontal and vertical directions of the div. In this way, you can safely change the size of the ball (each ball is still set to a different animation time)

@keyframes mar_ligts {  50%{
        transform: scale(.5);opacity: 0.4;
      }}

Copy after login

Billiard effect, four small balls are arranged in the middle in the horizontal and vertical directions, the two small balls in the middle do not move, and the small balls on the left and right move back and forth to both sides respectively (pay attention to the movement time difference is enough).

{animation: poolball_l 1s .5s linear infinite;}   //左边的小球
{animation: poolball_r 1s 0s linear infinite;}    //右边的小球@keyframes poolball_l {  25%{
        transform: translateX(-100%);
      }  50%{transform: translateX(0);
      }}
    @keyframes poolball_r {  25%{
        transform: translateX(100%);
      }  50%{transform: translateX(0);
      }}

Copy after login

##This is a very common effect , also in order to prevent page layout confusion due to changes in the size of the ball, a layer of fixed width and height div is added outside the ball.

An animation delay must also be set for each ball

{animation: size_change 1.2s linear infinite;}@keyframes size_change {  20%{
        width: 0;height: 0;
      }  40%{width: 0;height: 0;
      }  50%{width: 20px;height: 20px;
      }}

Copy after login

Five small balls, just center them horizontally, use margins to expand the distance between the balls, and change the translateY, width, height, and transparency of the balls through keyframe animation.

The initial width and height of the ball are 15px, and the transparency is .6.

{animation: flip_ballP 1.2s ease infinite,flip_ballS 1.2s ease infinite;}@keyframes flip_ballP {  50%{
        transform: translateY(60px);
      }}
    @keyframes flip_ballS {  50%{
        height: 15px;width: 15px;opacity: 0.6;
      }  75%{height: 20px;width: 20px;opacity: 1;
      }}

Copy after login

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