Share the example code of 3 loading designs in CSS3 (ii)

Source: Internet
Author: User
This is CSS LoadingDesign 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.