CSS3-animation implementation of reading effect

Last time I shared four CSS3 loading animations, we will continue today (the title continues from the previous time).

Online demo: http://liyunpei.xyz/loading.html (continuously updated)

Please note: some of the keyframe animations in the code use linear Curve, and some use ease curve. 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, When I first saw this effect, 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)

{:;:;:;
      }{:;
      }{:;:;:;
      }

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 width and height of the ball during its rise and fall to 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;}@keyframes jump {  50%{
        top: 60%;
      }}
    @keyframes jump_S {  5%{
        height: 25px; //下降过程width: 15px;
      }  54%{height: 20px;//到达底部width: 20px;
      }  55%{height: 25px;//上升过程width: 15px;
      }  98%{height: 20px;//到达顶点width: 20px;
      }}

## Six, Effect Six

##This effect is relatively simple.

A rectangular div, 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;}//大圆
{animation: rotate_bors 1s ease infinite;}//小圆@keyframes rotate_bors {  50%{
        transform: rotateZ(180deg);
      }  100%{transform: rotateZ(360deg);
      }}

##Eight, effect eight

##This effect is also very simple. I won’t say much about 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 {  50%{
        width: 15px;height: 15px;
      }}

##9. Effect nine

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

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

##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 of the ball through key frames. value. (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 {  50%{
        opacity: 1;transform: translateY(30px);
      }  70%{opacity: 1;transform: translateY(30px);
      }  100%{opacity: 0;transform: translateY(60px);
      }}

(To be continued)

The above is the detailed content of CSS3-animation implementation of reading effect. For more information, please follow other related articles on the PHP Chinese website!