This is
CSS Loading
Design of the second article, in fact, a lot of content is included in the first article, so this article on the properties of the introduction will be relatively less, if you encounter the properties do not understand, please refer to the previous article in the content.
CSS Loading Design (i)
Loading One
Paste_image.png
This does not seem to have any animation effect, if you show here I also want to use the screen to record the video screen, and then into a picture, feel too much trouble, do not know if there is no easy way, if there is, ask me to teach. OK, let's see how this animation works, first of all look at the Html
code
<p class= "box" > <p class= "loader" > <i></i> <i></i> <i> </i> </p> </p>
Visible, this indicates the nesting of two p
tags, very simple, the following look at the CSS
code
. box { width:100%; padding:3%; } . loader { width:30%; height:200px; margin:50px Auto; border:1px solid Chocolate; Box-sizing:border-box; Display:flex; Align-items:center; Justify-content:center; position:relative; } . Loader I { width:60px; height:60px; border-radius:50%; Background-color: #333333; Position:absolute; opacity:0; }
Visible, the code and the first article almost identical, in fact, not only this effect, the next three effects are so designed, the only difference is the animation design is different.
@-webkit-keyframes Loading { 0%{ transform:scale (0); opacity:0; } 5%{ opacity:1; } 100%{ Transform:scale (1); opacity:0; } }
Let me explain what this animation means.
1.0%: This time the circle we draw is scaled to 0%, and transparency is also 02. 5%: This time set the transparency to 1, that is, the graphic is out of the visible state, but this time the graph has been scaled to 0, so there is nothing to see. 3.100%: Note that in the 100 state, the graph is scaled to its original state, but the transparency is 0, what does that mean? This shows that in the 5%-100% process, the graph appears gradually, but the transparency is gradually reduced, so that an animated effect occurs.
Well, since the animation has already been defined, go to our i
label settings.
. Loader I:nth-child (1) { -webkit-animation:loading 1s linear 0s infinite; } . Loader I:nth-child (2) { -webkit-animation:loading 1s linear 0.2s infinite; } . Loader I:nth-child (3) { -webkit-animation:loading 1s linear 0.4s infinite; }
Well, here comes the first animated effect. Suggest to practice, look at the specific effect, personal feeling this animation is pretty good.
Loading
Paste_image.png
To tell the truth, this is my favorite animation effect, very interesting. Look at the Html
code
<p class= "box" > <p class= "loader" > <p class= "Loader-child" > <i></i> <i></i> </p> </p></p>
The code here is a CSS
little different from the above, let me analyze
Visible in the fourth block there is a line of code that border-color: transparent #333333;
we set is to draw a circle, because we need not a circle, set the line property, will be every 1/4 arcs transform the color properties, that is, transparency and #333333
change, we want to achieve the graphic effect.
Also, we i
set the properties for each label top,left
, these two properties need to position
be used in conjunction with, how to use we also in the previous article was introduced, set the two properties, the effect is to achieve a large circle contains a small round, that is, the effect of the picture.
Notice the last-child
animation effect, we added one at the end reverse
, meaning is counter-clockwise execution.
Okay, let's take a look at the animations.
@-webkit-keyframes Loading { 0% { transform:rotate (0deg) scale (1); } 50% { transform:rotate (180deg) scale (0.6); } 100% { transform:rotate (360deg) scale (1); } }
Animation is how an effect, combined with my face animation on the execution of analysis, you may have been able to simulate the effect of this animation, yes, very cool one effect.
Loading Three
Paste_image.png
This animation I feel very difficult, because I contact CSS
also only a few days, many properties of the settings I do not know why, has been searching all kinds of information on the Internet, until now understand is not very thorough, the following will be my master to share, as for those I am not too clear attributes, but also hope that the road to teach me the great fairy. Look at the code first. HTML
<p class= "box" > <p class= "loader" > <p class= "Loader-child" > <i></i> <i></i> <i></i> <i></i> <i></i> </p > </p></p>
It is obvious to see that there is a layer p
of labels here, mainly for position
the use of attributes.
. box{ width:100%; padding:3%; } . loader{ width:30%; height:200px; border:1px solid Chocolate; Box-sizing:border-box; margin:50px Auto; Display:flex; Align-items:center; Justify-content:center; } . loader-child{ width:80px; height:20px; position:relative; } . Loader-child i{ Display:block; width:20px; height:20px; border-radius:50%; Background-color: #333333; margin-right:10px; Position:absolute; }
This time we have 5 i
tags, but we can only see a circle, not the expected 5, this is the case? I'm not too sure.
Here's a look at the animation effect.
@-webkit-keyframes Loading { 0%{ left:100px; top:0; } 80%{ left:0; top:0; } 85%{ left:0px; top:-20px; width:20px; height:20px; } 90%{ width:40px; height:20px; } 95%{ left:100px; Top: -20px; width:20px; height:20px; } 100%{ left:100px; top:0; } }
1.0%-80%: The graph moves from the position of the left side of the parent element to a distance of 0 px, the top margin unchanged, that is, horizontal movement. 2.80%-85%: The left margin of the graph does not change, but moves up the PX, and the width height of the graphic is set to 20PX3. 85%-90%: The position of the graphic does not change, but the width of the graphic is widened to 40px4.90%-95%: The graphic starts to move to the right, moves the PX and reverts the width to 20px5.95%-100%: The graphic returns to the start position.
The following is an animated effect on each element
. Loader-child I:nth-child (1) { -webkit-animation:loading 2s linear 0s infinite; } . Loader-child I:nth-child (2) { -webkit-animation:loading 2s linear-0.4s infinite; } . Loader-child I:nth-child (3) { -webkit-animation:loading 2s linear-0.8s infinite; } . Loader-child I:nth-child (4) { -webkit-animation:loading 2s linear-1.2s infinite; } . Loader-child I:nth-child (5) { -webkit-animation:loading 2s linear-1.6s infinite; }
OK, here we are, welcome feedback, learn from each other.
"Recommended"
1. Free CSS Online video tutorial
2. CSS Online Manual
3. php.cn Lonely Nine-base (2)-css video tutorial