CSS3餅狀loading效果

概述

以前看到不少餅狀loading效果是用圖片的方式實現的，本例子採用的是純CSS3實現，這樣能夠節省資源空間，有興趣的小夥伴能夠看下~

詳細

代碼下載：http://www.demodashi.com/demo/10392.html

1、前情提要

一、本demo主要使用純CSS3實現一個餅狀Loading效果，須要熟悉CSS3中的動畫知識。

二、掌握position的幾個屬性及z-index的做用。

• position屬性規定元素的定位類型。

這個屬性定義創建元素佈局所用的定位機制。任何元素均可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。

值	描述
absolute	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。 所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static	默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

• z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。

 

值	描述
auto	默認。堆疊順序與父元素相等。
number	設置元素的堆疊順序。
inherit	規定應該從父元素繼承 z-index 屬性的值。

2、程序實現

一、文件結構以下：

二、實現原理

整體分爲兩部分：

外圈和內圓。顏色自定義，外圈和內圓是經過position定位重合在一塊兒，實質上外圈轉完2圈，內圓的紅色和粉色才各轉完1圈（內圓的全程包括紅色從1到0、粉色從1到0），因此內圓的動畫時間應該是外圈的兩倍！！！

外圈：

外圈很簡單，設置border-radius:50%便可畫出一個圓，而後設置三條邊框爲紅色，另一條爲透明，即畫出了四分之三個圓邊框（即外圓）。

而後設置外圈動畫，爲其設置的動畫就是旋轉一圈，infinite表示無限次。

內圓：

此處有四個半圓，左邊兩個，右邊兩個（round爲紅色，mask爲粉色），動畫主要經過改變兩個紅色半圓的z-index值來控制各個半圓顯示的優先順序。下面過程描述內圓的動畫全程（其中右邊的粉色全程不須要動，右邊紅色部分只須要改變z-index的值來改變顯示的優先級，從而實現顯示和隱藏的效果來配合補充左半邊的圓）：

 

a. 初始設置 模型圖：

紅左 z-index：3
粉1  z-index：2
紅右 z-index：1
粉2  z-index：0

b. 左邊紅色旋轉完180度時（逆時針旋轉因此是360→180→0）模型圖：

c. 左邊紅色轉完到0度時（此時左右兩邊的紅色半圓被粉色覆蓋）模型圖：

 

d.粉色半圓重複以前紅色半圓的動畫（即左邊粉色360→180→0）模型圖：

 

 

e. 當左邊粉色旋轉到0度時，所有半圓回到了最初始的狀態，整個動畫即完成（在相同時間下外圈完成了2次的動畫）。模型圖：

這樣外圈和內圓配合完成兩圈即爲整個動畫過程。

三、主要代碼

a. 首先html結構以下：

<div class="con-wrap">
    <!--外圈-->
    <div class="out-round"></div>
    
    <!--內圓，裏面有半圓四個-->
    <div class="in-round">
        <div class="lt-round"></div>
        <div class="lt-mask"></div>
        <div class="rt-round"></div>
        <div class="rt-mask"></div>
    </div>
</div>

 

b. 四分之三個圓實現：

.out-round {       
     width: 100px;      
     height: 100px;
     border-radius: 50%;           
     margin: 150px auto;         
     border: 3px solid #FF298C;    
     border-left: 3px solid transparent;      
     animation: outRound 1s linear infinite running;
        }

c. 左半圓和右半圓實現：

/*左邊兩個半圓*/
.lt-round, .lt-mask {            
        position: absolute;            
        width: 35px;            
        height: 70px;            
        border-radius: 35px 0 0 35px;            
        transform-origin: right center;
        }
        
/*右邊兩個半圓*/
.rt-round, .rt-mask {            
        position: absolute;            
        left: 50%;            
        width: 35px;            
        height: 70px;            
        border-radius: 0 35px 35px 0;
        }

d. 涉及的部分CSS屬性說明：

border-radius:圓角設置
position：元素的定位類型
z-index：元素的堆疊順序
animation：rtRound 2s linear infinite running;
    animation-name：動畫名稱
    animation-time：執行時間
    animation-timing-function:動畫執行速度
    animation-play-state：動畫初始狀態 
transform：
    rotate(deg):旋轉角度
動畫定義：
    @keyframes 動畫名稱 {
         0% { }
         …………
         100% { }
     }

3、運行效果

一、直接雙擊index.html文件打開便可查看效果。

二、運行截圖：

三、demo演示效果：

demo演示地址

 

4、其餘補充

一、因爲動畫是勻速變化的，可是z-index的值不能勻速變化，因此只能在某個很短期內去改變z-index的值。這樣才能達到效果。

二、因爲是本身定的大小，致使看起來大小不太合適。

 

代碼下載：http://www.demodashi.com/demo/10392.html

注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權