CSS3 learning page loading animation (4)

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 (3)], 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.

Seventeen, effect seventeen

# #Three small balls, centered vertically, with wide spacing, just change the translateY value of the small balls in sequence.

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }

Eighteen, effect eighteen

Three small balls, all centered in the horizontal and vertical directions, use the outer margin to expand the distance between the balls. From the effect, the two small balls on the left and right are doing a circular motion around the middle ball, then we can Directly let the parent element of the ball rotate to achieve the surrounding effect of the balls on both sides (when the parent element rotates, because of the round shape, the ball in the middle cannot be seen to be rotating, and the position in the middle will not change. From Visually, the middle ball has not changed in any way).

@keyframes wind_ball {
      50% {
        transform: rotateZ(180deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

Nineteen, Effect Nineteen

##There are five small balls in total. Each small ball executes the same animation, but the animation delay time of each small ball is different, so that the positions of the small balls are different. Position the five small balls at the same position as a unified starting point. (Here, I positioned the five balls to the far right)

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {
      80% {
        right: 75%;    //到达终点，开始返回起点      }
    }
@keyframes cool_ballS {
      80% {               //到达终点
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //开始返回起点，长度变大，宽度变小，模拟移动产生的形变
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到达起点
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢复初始
        width: 20px;
        height: 20px;
      } 
    }

Twenty, effect twenty

There are eight small balls in total. They are positioned to form a circle. Just change the width and height of the small balls (to keep the small balls changed, the small balls should be changed. The center of the circle is the basis)

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }

(50%-80% of the ball maintains the width and height at 0, forming an effect of half showing and half hiding)

二11. Effect 21

#There are three small balls in total, each small ball The movement trajectory is still the same. Here, I positioned the centers of the three small balls to the vertical top and the horizontal center, and then moved them in three stages, first to the lower right corner, then to the lower left corner, and finally returned to the starting point.

(At the time point near the middle of each stage, the transparency change is added)

@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

Twenty-two, effect twenty-two

This is similar to a rotating gear. The key is how to make the shape of a gear. A p gives The border is made into a circle inside, and the pseudo-class dotted border is made into outer serrations. The wider the border of the pseudo-class, the sparser the serrations, and vice versa.

Now that the gears are made, all that's left is the small rotating case.

.gear_ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: inline-block;
      border: 4px #fff solid;
      position: relative;
    }

    .gear_ball:after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      top: -8px;
      left: -8px;
      border: 8px #fff dashed;
    }

Today’s sharing is over, there will be another wave later, and it will end with flowers. 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 (4). For more information, please follow other related articles on the PHP Chinese website!