分享CSS3中3個Loading 設計的實例代碼（二）
- 零下一度原創
- 2017-05-05 15:20:591512瀏覽
這是CSS Loading 設計的第二篇文章，其實很多內容都包含在第一篇中，所以這篇文章中對屬性的介紹也會相對少些，如果碰到不明白的屬性，請參考上一篇文章的內容。
CSS Loading 設計（一）
Loading one
Paste_Image.png
#這樣看起來沒有任何動畫效果，如果在這裡展示我還要用屏幕錄製視屏，然後轉化為圖片，感覺太過於麻煩，不知道有沒有什麼簡便的方法，如果有，請教教我。好了，下面我們看看這個動畫效果該怎麼做，首先還是來看看Html 代碼
<p class="box">
<p class="loader">
<i></i>
<i></i>
<i></i>
</p>
</p>可見，這指示兩個p 標籤的嵌套，十分的簡單，下面就看看CSS 程式碼
.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;
}可見，這些程式碼和第一篇文章中的幾乎一模一樣，其實不止是這個效果，接下來的三個效果也都是這麼設計的，唯一不同的地方就是動畫的設計不同。
@-webkit-keyframes loading {
0%{
transform: scale(0);
opacity: 0;
}
5%{
opacity: 1;
}
100%{
transform: scale(1);
opacity:0;
}
}下面我來解釋一下這個動畫到底是什麼意思。
1. 0% ： 这个时候将我们画的圆形缩放为 0%，透明度也是 0 2. 5% ： 这个时候将透明度设置为 1 ，也就是图形是出于可见的状态， 但是这个时候图形已经被缩放为 0，所以还是什么东西都看不到。 3. 100% : 注意在 100 % 的状态下，图形被缩放为原始状态，但是透明度为0，这说明了什么？ 这说明在 5% - 100% 过程中，图形逐渐出现，但是透明度逐渐降低，这样就会出现一个动画效果。
好了，既然動畫效果已經定義好了，那就去給我們的 i 標籤設定吧。
.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;
}好了，到這裡第一個動畫效果就出現了。建議親自實踐一下，看一下具體的效果，個人覺得這個動畫還挺好看的。
Loading two
Paste_Image.png
說實話，這是本人最喜歡的動畫效果，十分有趣。看Html 程式碼
<p class="box">
<p class="loader">
<p class="loader-child">
<i></i>
<i></i>
</p>
</p>
</p>這裡的CSS 程式碼和上面就有一點差異了，下面我來分析一下
.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;
}
.loader-child {
width: 40px;
height: 40px;
position: relative;
}
.loader-child i {
display: block;
border: 2px solid #333333;
border-color: transparent #333333;
border-radius: 50%;
position: absolute;
}
.loader-child i:first-child {
width: 35px;
height: 35px;
top: 0;
left: 0;
-webkit-animation: loading 1s ease-in-out 0s infinite;
}
.loader-child i:last-child {
width: 15px;
height: 15px;
top: 10px;
left: 10px;
-webkit-animation: loading 1s ease-in-out 0.5s infinite reverse;
}可見在第四個區塊中有這麼一行程式碼border-color: transparent #333333; 本來我們設定的是畫一個圓形，由於我們需要的並不是一個圓形，設定了這行屬性之後，就會每隔1/4 個圓弧變換顏色屬性，也就是透明和#333333 進行變化，就達到了我們想要的圖形效果。
還有，我們針對每個i 標籤設定了top,left 屬性，這兩個屬性需要配合position 來使用，具體怎麼使用我們也在上一篇文章做了介紹，設定了這麼兩個屬性之後，達到的效果就是一個大圓包含一個小圓，也就是圖片中的效果。
注意看 last-child 動畫效果，我們在最後加上了一個 reverse, 意思是逆時針執行。
好了，下面我們來看看動畫
@-webkit-keyframes loading {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.6);
}
100% {
transform: rotate(360deg) scale(1);
}
}動畫是怎麼樣一個效果，結合我上面對動畫的執行分析，你可能就已經能模擬出這個動畫的效果了，是的，非常酷的一個效果。
Loading three
Paste_Image.png
這個動畫我感覺非常的難，由於我接觸CSS 也才幾天光景，很多屬性的設定我都不明所以然，一直在網上搜尋各種資料，直到現在理解的也不是很透徹，下面就將我所掌握的分享一下，至於那些我也不太清楚地屬性，還希望各路大仙教教我。還是老樣子，先來看看HTML 程式碼
<p class="box">
<p class="loader">
<p class="loader-child">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
</p>可以很明顯的看到，這裡多包涵了一層p 標籤，主要是為了配合position 屬性的使用。
.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;
}這時候我們雖然有 5 個 i 標籤，但卻只能看到一個圓形，不是預期的 5 個，這是這麼回事？我也不太清楚。
下面來看看動畫效果
@-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% ： 图形从距离父元素左边距为 100 px 的位置移动到 0 px，上边距不变，也就是水平移动。 2. 80% - 85% ： 图形的左边距不变，但是上移 20 px，而且图形的宽高设置为 20px 3. 85% - 90% : 图形的位置不变化，但是此时图形的宽拓宽到 40px 4. 90% - 95% ： 图形开始向右移动，移动100 px并且将宽复原为 20px 5. 95% - 100% ： 图形回到起始位置。
下面就是對每個元素設定動畫效果
.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;
}好了，就講到這裡，歡迎回饋，互相學習。
【相關推薦】
1. 免費css線上影片教學
2. css線上手冊
#以上是分享CSS3中3個Loading 設計的實例代碼（二）的詳細內容。更多資訊請關注PHP中文網其他相關文章！