CSS3 learning page loading animation (3)-CSS Tutorial-php.cn

CSS3 learning page loading animation (3)

青灯夜游

Release： 2018-10-15 15:54:08

forward

2811 people have browsed it

This article will share with you 6 types of CSS3 page loading animations. 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 (2)], I shared 6 more CSS3 loading animations. I will continue to share them today (the title is continued from the previous time). See the picture. Not really.

Eleven, Effect Eleven

# #Four small balls are included in four square p respectively. Position the small ball relative to the square (top: 0; left: 0). Set the rotation of the square p so that the small balls are located at the four corners respectively. Then use key frame animation to control the small balls. The ball moves back and forth between the current position and the 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 handed over to the parent element of the square p

{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

Twelve, Effect Twelve

##It is not difficult to achieve this effect. Fix the position of each small ball and change the transparency of the small ball (each small ball needs to set a different animation time)

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

Copy after login

Thirteen, Effect Thirteen

There are still nine small balls, but the size of the balls has been changed here, in order to prevent the typesetting caused by changing the size. It is confusing, so each ball is included in p with a fixed width and height, so that the ball is always centered in the horizontal and vertical directions of p. 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

Fourteen, Effect Fourteen

The billiard effect, four small balls are arranged in the middle horizontally and vertically, the two small balls in the middle do not move, and the small balls on the left and right sides The ball moves back and forth to both sides (just pay attention to the time difference of the movement).

{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

Fifteen, effect fifteen

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

Also set animation delay 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

16. Effect 16

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

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

To be continued!

I’ll share it here today, and there will be more to come later. I hope it will be helpful to everyone's learning. For more related tutorials, please visit

CSS Basics Video Tutorial

CSS3 Video Tutorial, bootstrap Tutorial!

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