CSS3 learning page loading animation (2)

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.

I have shared four CSS3 loading animations in the previous article [CSS3 Learning Page Loading Animation (1)], and we will continue today (the title is continued from the previous time).

Please note: Some of the keyframe animations in the code use linear curves, while others use ease curves. The former is executed at a constant speed, and the entire animation is executed at a fixed speed; the latter has an acceleration and deceleration phase, which accelerates at the beginning of the animation and decelerates when the animation is about to end (for example, if I set an animation at 50%, then when it is about to reach 50% %, the animation begins to slow down, and when it exceeds 50%, the animation begins to accelerate, which will appear as a short stay effect on the page. Effects seven and eight are the most obvious)

5. Effect 5

The effect of the ball climbing stairs, this is the first effect I saw , I thought it would be a bit complicated, but after writing it, I thought it was not that difficult.

First position the stairs to the upper right corner, execute the motion animation from the upper right to the lower left, and set the animation-delay value for each staircase (I used three stairs here, with a total duration of 1.8s, animation- The delay values ​​are 0s, -0.6s, -12s respectively)

{animation: step_mv 1.8s linear infinite;}<br>@keyframes step_mv {<br>      0%{<br>        right: 0;<br>        top: 0;<br>        opacity: 0.6;<br>      }<br>      50%{<br>        opacity: 1;<br>      }<br>      100%{<br>        right: 100%;<br>        top: 100%;<br>        opacity: 0.6;<br>      }<br>    }<br>

Secondly, determine the contact point between the ball and the stairs. The ball will use this contact point as the lowest benchmark. At the same time, change the ball's rising, The width and height during the descent make the ball beat more realistically. The movement time of the ball animation is exactly the delay time of the staircase animation, so as to ensure that the ball can contact each staircase.

{animation: jump .6s 0s ease infinite,jump_S .6s 0s ease infinite;}<br>@keyframes jump {<br>      50%{<br>        top: 60%;<br>      }<br>    }<br>    @keyframes jump_S {<br>      5%{<br>        height: 25px; //下降过程<br>        width: 15px;<br>      }<br>      54%{<br>        height: 20px;//到达底部<br>        width: 20px;<br>      }<br>      55%{<br>        height: 25px;//上升过程<br>        width: 15px;<br>      }<br>      98%{<br>        height: 20px;//到达顶点<br>        width: 20px;<br>      }<br>    }<br>

Six, Effect Six

## This effect is relatively simple.

A rectangle p, set the border and rounded corners, and set the color of any of the borders to inheritance (i.e. border-left/bottom/top/right-color:transparent);

In this way, The parent element has no border color, so the border on this side is colorless, forming a circle with a gap. Next, just set the rotation animation and it's OK. (The code will not be posted)

7. Effect 7

The production of this effect shape is the same as the previous method, except that this time an extra border is added and it is still rotated. I won’t go into more details and directly enter the key frame animation code.

{animation: rotate_bors 2s ease infinite;}//大圆<br>{animation: rotate_bors 1s ease infinite;}//小圆@keyframes rotate_bors {<br>      50%{<br>        transform: rotateZ(180deg);<br>      }<br>      100%{<br>        transform: rotateZ(360deg);<br>      }<br>    }<br>

Eight, effect eight

## This effect is also very simple. I won’t go into details on how to make the outer big circle. You only need to change the size of the small circle inside.

{animation: rotate_borw 1s linear infinite;}@keyframes rotate_borw {<br>      50%{<br>        width: 15px;<br>        height: 15px;<br>      }<br>    }<br>

9. Effect nine

## Set all the balls as inline block elements, give the parent element text-align: center to center the balls horizontally, and set the line height to center the balls vertically. Next, use keyframe animation to change the length, width, and left and right margins of the ball.

{animation: margin 1s linear infinite;}<br>    @keyframes margin {<br>      50%{<br>        margin:0 10px;<br>        width: 10px;<br>        height: 10px;<br>      }<br>    }<br>

10. Effect 10

# Still set the ball as an inline block, just center it horizontally. You can set the margin to adjust the distance between the balls, and set the translateY value of the ball through key frames. (The delay between each ball does not have to be equally divided, the difference can be reduced)

{animation: trans 1.2s ease infinite;}@keyframes trans {<br>      50%{<br>        opacity: 1;<br>        transform: translateY(30px);<br>      }<br>      70%{<br>        opacity: 1;<br>        transform: translateY(30px);<br>      }<br>      100%{<br>        opacity: 0;<br>        transform: translateY(60px);<br>      }<br>    }<br>

(To be continued)

I’ll share it here today, 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 (2). For more information, please follow other related articles on the PHP Chinese website!