Share example code of 3 loading designs in CSS3 (i)

I'm learning recently. HTML5Series of courses, so the course covers a lot of content, although the content is very simple and easy to understand, but very difficult to remember, such as CSS3Some of the properties. What we're going to introduce today. CSS3 LoadingAnimation is also the content of the Geek College, interested students can also go to watch the video screen.

Loading One

Demo01.gif

The first kind of loading animation effect, that is, so a diagram is constantly turning, and then we will look at the code.

First of all, let's define HTML the code, in order to facilitate here I only paste the core code

<p class= "box" >    <p class= "Loading" >        <i></i>    </p></p>

pBelow we use the i label, do not ask why, you can also change the p label or any other label. Here's what we're going to CSS Html do.

* {    box-sizing:border-box;    margin:0;    padding:0;}. box {    width:100%;    padding:3%;}. Loading {    Display:flex;    width:30%;    height:250px;    margin:50px Auto;    border:1px solid #699;    Justify-content:center;    Align-items:center;}

Here to explain, margin: 50px auto; this line, the upper and lower margins are set to 50px , left and right set to auto , so that we can achieve the horizontal center of the elements of the purpose.

And what does it box-sizing: border-box mean here? We set the width to the parent element 30% , and we set the border, and the size of the bounding rectangle is not counted in the width of the current element? Here we set the value is the description, plus the size of the bounding rectangle, the current element of the parent element of 30%.

display,align-items,justify-contentThese three properties are to place the i contents of the label in p the middle. First, the display property will be set to the p elastic box element, and then the set element is centered on the align-items vertical axis, and the element is centered on the justify-content axis. Note that the center effect must be valid if the three elements exist at the same time, because the latter two properties are dependent on the first property.

. Loading I {        width:35px;        height:35px;        position:relative;        Display:block;        border-radius:50%;        Background:linear-gradient (transparent 0, transparent 50%,                #699 50%, #699 100%);        -webkit-animation:loading 1s linear 0s infinite;    }

Look at the background properties, which set the linear gradient effect, where the parameters are also I just contact can not understand, do not understand why to write so, in fact, can be so understood, from 0% to 70% set into transparent, from 70% to 100% set into #699 , So we can see the image in the picture above.

-webkit-animationproperty is an animation for the current element, the first parameter is the name of the animation, that loading is, the animation needs to be defined by ourselves, the specific definition is described below. The second parameter is the duration of the animation, the third parameter is the speed curve of the animation, the fourth parameter is the animation delay time, and the fifth parameter is the number of times the animation plays. Here's a look at our own defined animations

@-webkit-keyframes Loading {from    {        transform:rotate (0deg);    }    to {        transform:rotate (360deg);    }}

It is easy to understand that the elements are rotated at different stages of the animation. It is important to note that this definition can only be seen in the Chrome browser and the Safari animation effect, so if we want to also show animation in Firefox, then we need to define this.

@-moz-keyframes  loading-moz{from    {        transform:rotate (0deg);    }    to {        transform:rotate (360deg);    }}

The reference -moz-animation: loading-moz 1s linear 0s infinite; is almost the same, just a change of head (as for how to define it in other browsers, try it yourself).

Loading

Demo02.gif

The effect of this animation is that five stripes swing like a wave. Here's how to write an effect. First HTML of all, no suspense, very simple layout

<p class= "box" >    <p class= "Loading" >        <i></i>        <i></i>        < i></i>        <i></i>        <i></i>    </p></p>

In fact, almost all the code of this effect CSS is consistent with the above, to see

* {    box-sizing:border-box;    margin:0;    padding:0;}. box {    width:100%;    padding:3%;}. Loading {    Display:flex;    width:30%;    height:250px;    margin:50px Auto;    border:1px solid #699;    Justify-content:center;    Align-items:center;}. Loading I {    position:relative;    width:6px;    height:32px;    margin-right:6px;    border-radius:3px;    Background-color: #699;}

The only extra line of code here is the .loader i margin-right attribute in, why do you have more such a line? Because we have 5 i tags, and if we don't have this line property set, then all the labels will overlap back together. The next step is the setting of the animation effect.

@-webkit-keyframes Loading {    0% {        Transform:scaley (1);    }    50% {        Transform:scaley (. 5);    }    100% {        Transform:scaley (1);    }}. Loading i:first-child {    -webkit-animation:loading 1s linear. 1s infinite;}. Loading I:nth-child (2) {    -webkit-animation:loading 1s linear. 2s infinite;}. Loading I:nth-child (3) {    -webkit-animation:loading 1s linear. 3s infinite;}. Loading I:nth-child (4) {    -webkit-animation:loading 1s linear. 4s infinite;}. Loading i:last-child {    -webkit-animation:loading 1s linear. 5s infinite;}

We can see that the animated effect we set is 50% when we zoom the element along the Y axis. Then we animate each of the i tags, the difference is that the animation delay execution time in each tag is different, so that we can achieve the effect of the wave, and it is worth noting that we have found that the animation speed curve we specified is different, In fact this place we need to know all the possible values, as follows

Linear  animations are the same speed from beginning to end. Ease    default. The animation starts at low speed, then accelerates and slows down before it ends. Ease-in animations start at low speed.    ease-out    animation ends at low speed. Ease-in-out animations start and end at low speed.

Loading Three

Demo03.gif

This time to do the effect is dynamic circular loading effect, below to see how to implement the HTML code here and the above two may be a bit different, here p is a tag, the purpose is to make the drawing can be centered.

<p class= "box" >    <p class= "loader" >        <p class= "Loading" >            <i></i>            < i></i>            <i></i>            <i></i>            <i></i>            <i></i >            <i></i>            <i></i>        </p>    </p></p>

Look at the CSS code

    . box {            width:100%;            padding:3%;     }    . loader {        width:30%;        height:250px;        margin:10px Auto;        border:1px solid Chocolate;        Box-sizing:border-box;        Display:flex;        Align-items:center;        Justify-content:center;    }    . Loading {        position:relative;    }    . Loading I {        display:block;        width:15px;        height:15px;        Background-color: #333333;        border-radius:50%;        Position:absolute;    }

To understand why the code will draw the graph, then we have to position have a thorough understanding of the properties, first we take a look at the two attribute values we used to mean.

Absolute      generates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. The  position of the element is defined by the "left", "Top", "right" and "bottom" attributes. The relative      generates relatively positioned elements that are positioned relative to their normal positions.  therefore, "left:20" adds 20 pixels to the left position of the element.

Know the meaning, and then to analyze the above code, we loading define in the element a position:relative because there is no corresponding content to prop it up, so this time loading is actually the center of a point, and then we i set the label as absolute positioning, that is, around the point to draw a circle. Let's take a look at the circle code.

. Loading I:nth-child (1) {    top:25px;    left:0px;}. Loading I:nth-child (2) {    top:17px;    left:17px;}. Loading I:nth-child (3) {    top:0px;    left:25px;}. Loading I:nth-child (4) {    top: -17px;    left:17px;}. Loading I:nth-child (5) {    top: -25px;    left:0px;}. Loading I:nth-child (6) {    top: -17px;    Left: -17px;}. Loading I:nth-child (7) {    top:0px;    Left: -25px;}. Loading I:nth-child (8) {    top:17px;    Left: -17px;}

See this code, if you do not know why you can draw a circle, then take out the draft paper, draw an axis, the value in the above code as the value of the axis, the value top y left of the axis as the value x , you can see why the code is so written. OK, the static image has been written, then it's time to define the animation.

  @-webkit-keyframes Loading {        50%{            Transform:scale (0.4);            opacity:0.3;        }        100%{            Transform:scale (1);            opacity:1;        }    }

opacityproperty is used to set the transparency of an element. So our animation effect is to reduce the element to 0.4 times times and set the transparency to 0.3. Then assign an i animation effect to each label, from top to bottom

-webkit-animation:loading 1s ease 0s infinite; -webkit-animation:loading 1s ease 0.12s infinite; -webkit-animation:loading 1s ease 0.24s infinite; -webkit-animation:loading 1s ease 0.36s infinite; -webkit-animation:loading 1s ease 0.48s infinite; -webkit-animation:loading 1s ease 0.60s infinite; -webkit-animation:loading 1s ease 0.72s infinite; -webkit-animation:loading 1s ease 0.84s infinite;

If you run this time, you will notice that it appears to be rotated counterclockwise, and if you want to change to a clockwise rotation, you can add a minus sign before the delay time. Well, let's introduce these three loading effects today, and if there are errors in writing, please feel free to exchange feedback.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial