Recently I am studying the <a href="http://m.miracleart.cn/wiki/1118.html" target="_blank">HTML5</a> series of courses, which cover a lot of content. Although the content is very simple and easy to understand, it is very difficult to remember, such as CSS3 Some properties of . The CSS3 Loading Animation I will introduce today is also the content introduced in Geek Academy. Interested students can also go and watch the video.

Loading one

##demo01.gif

The first kind of loading animation effect is like this picture. Turning around, let's take a look at the code.

First, let’s define the

HTML code. For convenience, I only paste the core code here

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

pWe use below i tag, don’t ask why, you can also change it to p tag or any other tag. Let’s use CSS to modify our Html

* {
    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 is an explanation,

margin: 50px auto; In this line, add up and downThe outer margins are set to 50px, and the left and right margins are set to auto, so that our elements can be horizontally centered.

And what does

box-sizing: border-box here mean? We set the width to 30% of the parent element, and we set a border. Does the size occupied by this border count in the width of the current element? The value we set here is the description. Plus the size occupied by the border, the current element occupies 30% of the parent element.

display,align-items,justify-content These three attributes are to place the content in the i tag in the middle of p . First use the display attribute to set p to a flexible box element, then use align-items to set the element to be centered on the vertical axis, justify-content Set the element to be centered on the horizontal axis. Note that the centering effect must be effective when these three elements exist at the same time, because the latter two attributes are dependent on the first attribute.

 .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 attribute, which sets a linear gradient effect. The parameters are also new to me and I can’t understand. I don’t understand why it is written like this. In fact, it can be understood this way. From 0% to 70% are set to transparent, from 70% to 100% are set to #699, In this way we see the image in the above Picture.

-webkit-animation The attribute specifies an animation for the current element. The first parameter is the name of the animation, which is loading. This animation requires us to You have to define it yourself. The specific definition will be introduced 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. Let’s take a look at our own defined animation

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

It is very easy to understand, which is to rotate elements at different stages of animation. It is worth noting that this definition method can only see the animation effect in the

Chrome and Safari browsers, so if we want to also display the animation effect in the Firefox browser, Then we need to define it this way.

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

When quoting -moz-animation: loading-moz 1s linear 0s infinite; is almost the same, just changing the head (as for other How to define it in the browser, try it yourself).

Loading two

##demo02.gif

The effect of this animation is that the five stripes swing like waves. Let’s write such an effect below. The first is

HTML

, no suspense, very simple layout<pre class='brush:php;toolbar:false;'>&lt;p class=&quot;box&quot;&gt; &lt;p class=&quot;loading&quot;&gt; &lt;i&gt;&lt;/i&gt; &lt;i&gt;&lt;/i&gt; &lt;i&gt;&lt;/i&gt; &lt;i&gt;&lt;/i&gt; &lt;i&gt;&lt;/i&gt; &lt;/p&gt; &lt;/p&gt;</pre>In fact, almost all the

CSS

codes for this effect are consistent with the above, let’s take a look<pre class='brush:php;toolbar:false;'>* { 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; }</pre>The only extra line of code here is the

margin-right

attribute in .loader i. Why is there such an extra line? Because we have 5 i tags, if there is no attribute setting in this line, all the tags will overlap. The next step is to set the animation effect.<pre class='brush:php;toolbar:false;'>@-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; }</pre><p>可見我們?cè)O(shè)置的動(dòng)畫效果就是在 <code>50% 的時(shí)候，將元素沿著 Y 軸進(jìn)行縮放。然后我們對(duì)每一個(gè)i 標(biāo)簽進(jìn)行了動(dòng)畫設(shè)定，不同的是每一個(gè)標(biāo)簽中的動(dòng)畫延遲執(zhí)行時(shí)間不同，這樣就可以達(dá)到波浪的效果，還有一點(diǎn)值得注意的是，我們發(fā)現(xiàn)我們指定的 動(dòng)畫速度曲線不同了，其實(shí)這個(gè)地方我們有必要了解一下所有可能的取值，如下

linear  動(dòng)畫從頭到尾的速度是相同的。
ease    默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。 
ease-in 動(dòng)畫以低速開始。    
ease-out    動(dòng)畫以低速結(jié)束。
ease-in-out 動(dòng)畫以低速開始和結(jié)束。

Loading Three

demo03.gif

這次要做的效果是動(dòng)態(tài)轉(zhuǎn)圈加載的效果，下面來看看如何實(shí)現(xiàn)這里的 HTML 代碼和以上兩個(gè)可能有點(diǎn)差別，這里多了一個(gè) p 標(biāo)簽，目的是讓畫出的圖形能夠居中。

<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>

看看 CSS 代碼

    .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;
    }

要理解為什么這些代碼會(huì)畫出如圖所示的圖形，那么我們必須要對(duì) position 屬性有一個(gè)透徹的了解，首先我們來看看我們用到的兩個(gè)屬性值是什么意思.

absolute    
  生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
  元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

relative    
  生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
  因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。

知道了意思，再來分析以上的代碼，我們?cè)?code>loading 元素中定義了一個(gè) position:relative 由于沒有相應(yīng)的內(nèi)容將其撐起，所以這個(gè)時(shí)候loading 實(shí)際上為中心的一個(gè)點(diǎn)，然后我們將 i 標(biāo)簽設(shè)置為絕對(duì)定位，也就是圍繞著這個(gè)點(diǎn)進(jìn)行畫圓即可。下面來看看畫圓的代碼

.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;
}

看到這些代碼，如果你不知道為什么這樣能夠畫出一個(gè)圓，那么拿出草稿紙，畫一個(gè)坐標(biāo)軸，將上述代碼中的 top 值作為 y 軸的值，將 left 的值作為 x 軸的值，就可以看到為什么這么書寫代碼了。好了，靜態(tài)圖像已經(jīng)書寫完畢，那么接下來就是定義動(dòng)畫的時(shí)間了

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

opacity 屬性用于設(shè)置元素的透明度。所以說我們的動(dòng)畫效果就是將元素縮小為 0.4 倍并且將透明度設(shè)置成 0.3。然后為每個(gè) i 標(biāo)簽指定動(dòng)畫效果，從上到下依次為

 -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;

這個(gè)時(shí)候如果運(yùn)行，你會(huì)發(fā)現(xiàn)好像是逆時(shí)針旋轉(zhuǎn)的，如果想改成順時(shí)針旋轉(zhuǎn)，可以將延遲時(shí)間前面都加上負(fù)號(hào)。好了，今天先介紹這三種加載效果，如果書寫有錯(cuò)誤，歡迎反饋交流。

【相關(guān)推薦】

1.?免費(fèi)css在線視頻教程

2.?css在線手冊(cè)

3. php.cn獨(dú)孤九賤（2）－css視頻教程

The above is the detailed content of Share the example code of 3 Loading designs in CSS3 (1). For more information, please follow other related articles on the PHP Chinese website!