CSS3之loading效果

實現相似這樣的等待動畫效果。

第一步：如何畫一個大圈，能夠嘗試先畫兩個個正方形重疊

#circlebox{
				width: 40px;
				height: 40px;
				border: 1px solid red;
				margin: 100px;
				position: absolute;
				
			}
			#circlebox p{
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background-color: #FF0000;
				position: absolute;
			}
            #circlebox p:nth-of-type(1){
				left: 0;
				top: 0;
			}
			#circlebox p:nth-of-type(2){
				right: 0;
				top: 0;
			}
			#circlebox p:nth-of-type(3){
				right: 0;
				bottom: 0;
			}
			#circlebox p:nth-of-type(4){
				left: 0;
				bottom: 0;
			}

<div id="circlebox">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
        <div id="circlebox">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>

而後讓第二個正方形旋轉45deg。

#circlebox:nth-of-type(2){
				transform: rotate(45deg);
			}

再將兩個正方形的邊框去掉：/* border: 1px solid red; */就獲得了一個大圈啦

第二步：讓全部小圓都會變大變小 ,這裏使用了CSS3 的@keyframes和scale方法

@keyframes建立動畫是經過逐步改變從一個CSS樣式設定到另外一個。

在動畫過程當中，您能夠更改CSS樣式的設定屢次。

指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。
0％是開頭動畫，100％是當動畫完成。

使用scale()方法來將元素根據中心原點進行縮放。

@keyframes move{
				0%{transform: scale(0);}
				50%{transform: scale(1);}
				100%{transform: scale(0);}
			}

在#circlebox p{}添加animation: move 1.5s infinite linear;讓小圓在1.5s內循環變大變小

#circlebox p{
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background-color: #FF0000;
				position: absolute;
				animation: move 1.5s infinite linear;
			}

效果：

第三步：完成上面的動畫以後，要讓每一個小圓變大變小隨時間而定，咱們讓第一個圓0.1s後開始變化，第二個圓0.3s後開始變化。。。。第八個圓1.5s後開始變化，這樣恰好符合上面定義的 1.5s循環動畫。這裏須要注意的是，第二個圓其實是第二個div裏面的第一個p標籤。

#circlebox:nth-of-type(1) p:nth-of-type(1){
				animation-delay: 0.1s;
			}
			#circlebox:nth-of-type(2) p:nth-of-type(1){
				animation-delay: 0.3s;
			}
			#circlebox:nth-of-type(1) p:nth-of-type(2){
				animation-delay: 0.5s;
			}
			#circlebox:nth-of-type(2) p:nth-of-type(2){
				animation-delay: 0.7s;
			}
			#circlebox:nth-of-type(1) p:nth-of-type(3){
				animation-delay: 0.9s;
			}
			#circlebox:nth-of-type(2) p:nth-of-type(3){
				animation-delay: 1.1s;
			}
			#circlebox:nth-of-type(1) p:nth-of-type(4){
				animation-delay: 1.3s;
			}
			#circlebox:nth-of-type(2) p:nth-of-type(4){
				animation-delay: 1.5s;
			}

這樣就完成了加載等待的動畫效果啦，這是順時針變化的，若是想讓它逆時針變化的話，只須要將每一個小圓的動畫延時時間改成負的就行，（負的表示提早變化），這樣就會從第8個圓開始變化，而後第7個、第6個。。。。。。