Récemment, j'étudie la série de cours <a href="http://m.miracleart.cn/wiki/1118.html" target="_blank">HTML5</a>, qui couvrent beaucoup de contenu, bien que le contenu soit très simple et facile à comprendre, il est très difficile à retenir, comme certains des attributs CSS3. de . L'CSS3 Loading animation que je vais vous présenter aujourd'hui est également le contenu introduit dans la Geek Academy. Les étudiants intéressés peuvent également aller regarder la vidéo.

Chargement d'un

demo01.gif

Le premier effet d'animation de chargement est comme cette image. En nous retournant, prenons. un coup d'oeil au code.

Tout d'abord, définissons le code HTML Pour plus de commodité, je colle uniquement le code principal ici

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

p Ci-dessous, nous utilisons la balise i. demandez pourquoi, vous pouvez également le remplacer par la balise p ou toute autre balise. Utilisons CSS pour modifier notre 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;
}

Laissez-moi vous expliquer ici, dans cette ligne de margin: 50px auto;, définissez les marges supérieure et inférieure sur 50px, gauche et droite Réglez sur auto pour centrer notre élément horizontalement.

Et que signifie box-sizing: border-boxici ? On fixe la largeur au 30% de l'élément parent, et on fixe une bordure. La taille occupée par cette bordure compte-t-elle dans la largeur de l'élément courant ? La valeur que nous définissons ici est la description Plus la taille occupée par la bordure, l'élément actuel occupe 30 % de l'élément parent.

display,align-items,justify-content Ces trois attributs servent à placer le contenu dans la balise i au milieu de p. Utilisez d'abord l'attribut display pour définir p comme élément de bo?te flexible, puis utilisez align-items pour définir l'élément pour qu'il soit centré sur l'axe vertical, et justify-content pour définir l'élément pour qu'il soit centré sur l'axe horizontal . A noter que l'effet de centrage doit être efficace lorsque ces trois éléments existent en même temps, car ces deux derniers attributs dépendent du premier attribut.

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

Regardez l'attribut background, qui définit un effet de dégradé linéaire. Les paramètres sont également quelque chose que je ne comprends pas quand je suis nouveau dans ce domaine, je ne comprends pas pourquoi c'est écrit. comme ?a. En fait, cela peut être compris de cette fa?on. De 0% à 70% est défini sur transparent, de 70% à 100% est défini sur #699, afin que nous puissions voir l'image dans le ci-dessus photo. L'attribut

-webkit-animation spécifie une animation pour l'élément actuel. Le premier paramètre est le nom de l'animation, qui est loading. Cette animation doit être définie par nous-mêmes. ci-dessous. Le deuxième paramètre est la durée de l'animation, le troisième paramètre est la courbe de vitesse de l'animation, le quatrième paramètre est le temps de retard de l'animation et le cinquième paramètre est le nombre de fois que l'animation est jouée. Jetons un coup d'?il à notre propre animation définie

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

qui est très facile à comprendre, c'est-à-dire la rotation d'éléments à différentes étapes de l'animation. Il est à noter que cette méthode de définition ne peut voir l'effet d'animation que dans les navigateurs Chrome et Safari, donc si nous voulons également afficher l'effet d'animation dans le navigateur Firefox, alors nous devons le définir comme ceci. Lorsque

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

fait référence à , -moz-animation: loading-moz 1s linear 0s infinite; est presque pareil, il suffit de changer l'en-tête (pour ce qui est de le définir dans d'autres navigateurs, essayez-le vous-même).

Chargement de deux

demo02.gif

L'effet de cette animation est que les cinq bandes se balancent comme des vagues. écrivons un tel effet ci-dessous. Le premier est HTML, sans aucun doute, disposition très simple

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

En fait, presque tous les CSS codes pour cet effet sont cohérents avec ce qui précède, jetons un coup d'?il

* {
    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;
}

La seule ligne de code supplémentaire ici est l'attribut .loader i dans margin-right. Pourquoi y a-t-il une telle ligne supplémentaire?? Parce que nous avons 5 balises i, s'il n'y a pas de paramètre d'attribut dans cette ligne, toutes les balises se chevaucheront. L'étape suivante consiste à définir l'effet d'animation.

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

可見我們設置的動畫效果就是在 50% 的時候，將元素沿著 Y 軸進行縮放。然后我們對每一個i 標簽進行了動畫設定，不同的是每一個標簽中的動畫延遲執(zhí)行時間不同，這樣就可以達到波浪的效果，還有一點值得注意的是，我們發(fā)現(xiàn)我們指定的 動畫速度曲線不同了，其實這個地方我們有必要了解一下所有可能的取值，如下

linear  動畫從頭到尾的速度是相同的。
ease    默認。動畫以低速開始，然后加快，在結束前變慢。 
ease-in 動畫以低速開始。    
ease-out    動畫以低速結束。
ease-in-out 動畫以低速開始和結束。

Loading Three

demo03.gif

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

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

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

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

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

知道了意思，再來分析以上的代碼，我們在loading 元素中定義了一個 position:relative 由于沒有相應的內容將其撐起，所以這個時候loading 實際上為中心的一個點，然后我們將 i 標簽設置為絕對定位，也就是圍繞著這個點進行畫圓即可。下面來看看畫圓的代碼

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

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

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

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

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

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

【相關推薦】

1.?免費css在線視頻教程

2.?css在線手冊

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!