CSS3 learning page loading animation (5)

I have posted four articles before, with 22 effects. This article will share with you 6 types of CSS3 page loading animations, for a total of 28 page loading animation effects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the previous article [CSS3 Learning Page Loading Animation (4)], I shared 6 more CSS3 loading animations, and I will continue to share them today (the title is continued from the previous time).

Twenty-three, effect twenty-three

##Two squares are initially positioned 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, and rotates 90 °, the width and height are reduced; in the second stage, the upper right is moved to the lower right, rotated 180°, and the width and height are restored; in the third stage, the lower right is moved to the lower left, rotated 270°, and the width and height are reduced; in the fourth stage, the lower left Move to the upper left, rotate 360°, and restore the width and height.

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

{animation: party_ball 2s ease infinite;}
@keyframes party_ball {
      25% {
        -webkit-transform: scale(.5) rotateZ(90deg);
        transform: scale(.5) rotateZ(90deg);
        top: 0;
        left: 100%;
      }
      50% {
        -webkit-transform: scale(1) rotateZ(180deg);
        transform: scale(1) rotateZ(180deg);
        top: 100%;
        left: 100%;
      }
      75% {
        -webkit-transform: scale(.5) rotateZ(270deg);
        transform: scale(.5) rotateZ(270deg);
        top: 100%;
        left: 0;
      }
      100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
        top: 0;
        left: 0;
      }
    }

Twenty-four, effect twenty-four

##Similar to the beating effect of a flame, position the three square p's 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;
      }
    }

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 p's are 0, 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%;
    }

Pac-Man’s mouth has been made. The remaining two p’s are one forward rotation on the Z axis and one reverse Z axis. The axis rotates and the eating action is made.

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

Twenty-six, effect twenty-six

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

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

Twenty-seven, effect twenty-seven

##A p and a pseudo class are made. p is responsible for rotation, and the pseudo class is responsible for changing the height. Each one performs its own duties.

@keyframes locker_ball {           //p旋转
      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;
      }
    }

Twenty-eight, effect twenty-eight

##The effect of the clock (my positioning seems not to be in the middle)The effect of the clock can be achieved using only one keyframe animation, which is to rotate 360°, just change the position of the two pointers The animation movement time is enough.

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

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

Finished with flowers! I hope this series can be helpful to everyone's learning. For more related tutorials, please visit

CSS basic video tutorial

,

CSS3 video tutorial

,

bootstrap tutorial

!

The above is the detailed content of CSS3 learning page loading animation (5). For more information, please follow other related articles on the PHP Chinese website!