最近本人正在學習
HTML5
系列課程,這麼課程涵蓋的內容也是非常的多,雖然內容十分簡單容易理解,但是非常難以記憶,比如
CSS3
的一些屬性。今天所要介紹的
CSS3 Loading
動畫也是極客學院裡所介紹的內容,感興趣的同學也可以前去觀看視屏。
Loading one
demo01.gif
第一種載入動畫的效果,就是這麼一個圖在不停的轉啊轉,下面我們就來看看代碼。
首先,我們先定義一下 HTML
代碼,為了方便這裡我只粘貼核心代碼
<p class="box"> <p class="loading"> <i></i> </p></p>
p
下面我們使用了 i
標籤,不要問為什麼,你也可以換成 p
標籤或其他任何標籤。下面就用 CSS
對我們的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;}
這裡解釋一下,margin: 50px auto;
這一行,將上下外邊距設定為 50px
, 左右設定為 auto
,這樣可以達到將我們的元素水平置中的目的。
還有這裡的 box-sizing: border-box
是什麼意思呢?我們將寬度設定為了父元素的 30%
,而我們又設定了邊框,那這個邊框佔據的大小算不算在當前元素的寬度中呢?這裡我們設定的值就是說明,加上邊框佔據的大小,當前元素占父元素的 30%。
display,align-items,justify-content
這三個屬性是為了將 i
標籤中的內容放置在 p
的中部。首先利用 display
屬性將p
設定成彈性盒子項目,然後利用 align-items
設定元素在縱軸上置中,justify-content
設定元素在橫軸上置中。注意置中效果必須在這三種元素同時存在時才有效,因為後兩個屬性是依賴於第一個屬性的。
.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; }
看看 background
屬性,其中設定了線性漸層效果,其中的參數也是我剛接觸不能夠理解的,不明白為什麼要這麼寫,其實可以這麼理解,從0%
到 70%
設定成透明,從 70%
到 100%
設定成 #699
,這樣我們就看到了上述圖片中映像。
-webkit-animation
屬性就是為當前元素指定了一個動畫,第一個參數是動畫的名稱,也即 loading
,該動畫是需要我們自己去定義的,具體定義下面再介紹。第二個參數是動畫持續的時間長度,第三個參數是動畫的速度曲線,第四個參數是動畫延遲時間,第五個參數是動畫播放的次數。下面看看我們自己定義的動畫
@-webkit-keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}
十分容易理解,就是在動畫的不同階段進行元素的旋轉。值得注意的是,這種定義方式只能在 Chrome
和 Safari
瀏覽器中能看到動畫效果,那麼如果我們想在Firefox瀏覽器中也顯示動畫效果,那麼我們需要這麼定義。
@-moz-keyframes loading-moz{ from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
引用的時候 -moz-animation: loading-moz 1s linear 0s infinite;
幾乎是相同的,只不過換個頭部而已(至於在其他瀏覽器中怎麼定義,自己去試試吧)。
Loading two
demo02.gif
這個動畫的效果就是五個條紋像波浪一樣擺動。下面就來書寫這麼一個效果。首先是HTML
,毫無懸念,十分簡單的布局
<p class="box"> <p class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </p></p>
其實這個效果幾乎所有的CSS
代碼都是和上面一致的,來看看
* { 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;}
這裡唯一多出來的一行代碼就是 .loader i
中的 margin-right
屬性,為什麼會多這麼一行呢?因為我們有 5 個 i
標籤,如果沒有這行屬性設定,那麼所有的標籤就回重疊在一起了。接下來就是動畫效果的設定了.
@-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
標籤進行了動畫設定,不同的是每一個標籤中的動畫順延強制時間不同,這樣就可以達到波浪的效果,還有一點值得注意的是,我們發現我們指定的 動畫速度曲線不同了,其實這個地方我們有必要瞭解一下所有可能的取值,如下
linear 動畫從頭到尾的速度是相同的。ease 預設。動畫以低速開始,然後加快,在結束前變慢。 ease-in 動畫以低速開始。 ease-out 動畫以低速結束。ease-in-out 動畫以低速開始和結束。
Loading Three
demo03.gif
這次要做的效果是動態轉圈載入的效果,下面來看看如何?這裡的 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" 屬性進行規定。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
軸的值,就可以看到為什麼這麼書寫代碼了。好了,靜態映像已經書寫完畢,那麼接下來就是定義動畫的時間了
@-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;
這個時候如果運行,你會發現好像是逆時針旋轉的,如果想改成順時針旋轉,可以將延遲時間前面都加上負號。好了,今天先介紹這三種載入效果,如果書寫有錯誤,歡迎反饋交流。
【相關推薦】
1. 免費css線上視頻教程
2. css線上手冊
3. php.cn獨孤九賤(2)-css視頻教程