10個樣式各異的CSS3 Loading載入動畫

2021-09-06 15:19:45 字數 2241 閱讀 2888

前幾天我在園子裡分享過2款很酷的css3 loading載入動畫，今天又有10個最新的loading動畫分享給大家，這些動畫的樣式都不一樣，實現起來也並不難，你很容易把它們應用在專案中，先來看看效果圖：

你也可以在這裡檢視demo演示。

下面我們來挑選幾個比較典型的案例來分析一下**。

先來看看第乙個案例，是條狀動畫，html**如下：

<


div 


id="caseverte"


>


<


div 


id="case1"


>


div>


<


div 


id="case2"


>


div>


<


div 


id="case3"


>


div>


<


div 


id="case4"


>


div>


<


div 


id="case5"


>


div>


<


div 


id="case6"


>


div>


<


div 


id="load"


>


<


p>loading ...


p>


div>


div>
css**如下：

#caseverte #caseverte #load #caseverte #case1 #caseverte #case2 #caseverte #case3 #caseverte #case4 #caseverte #case5 #casebleu #case6
再來看看第五個漸變的圈圈，html**：

<


div 


id="caseviolette"


>


<


div 


id="cercle"


>


<


div 


id="cerclecache"


>


div>


div>


<


div 


id="load"


>


<


p>loading


p>


div>


<


div 


id="point"


>


div>


div>
css**如下：

#caseviolette #caseviolette #load #cercle @-webkit-keyframes turncercle 100% }


@keyframes turncercle 100% }


#cerclecache
最後再來看倒數第三個，三個圈圈漸隱漸現的動畫，html**如下：

<


div 


id="caseverteclaire"


>


<


div 


id="transform"


>


<


div 


id="transform1"


>


div>


<


div 


id="transform2"


>


div>


<


div 


id="transform3"


>


div>


div>


<


div 


id="load"


>


<


p>loading


p>


div>


div>
css**如下：

#caseverteclaire #caseverteclaire #load #tranform #transform1 #transform2 #transform3 @-webkit-keyframes transform 25% 50% 75% 100% }


@keyframes transform 20% 40% 60% 80% 100% }

介紹 10 個 CSS3 屬性

the css ul a a hover transition 有三個引數 the property to transition.set this value to all if needed 轉換屬性。設定此值為所有如有需要 the duration 持續時間 the easing type 緩動...

10個CSS3開發工具

2011 05 17 22 15 20人閱讀 收藏 編輯 刪除使用css3 css3 pie 使用這款工具可以製作出漂亮的css3盒子，像是photoshop製作出來的效果。css3 builder 一款很棒的陰影效果生成工具，自動生成相應的 css3 drop shadow generator 這...

css的基本使用3 背景樣式

背景顏色 背景 url 的位址可以是相對位址也可以是絕對位址 元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，不包括外邊距 預設背景位於元素的左上角，並在水平垂直方向重複 背景顯示方式 背景重複方式 背景的定位 值 說明注意 長度值 x y 第乙個水平位置，第二個垂直位置左上角 只寫乙個引數的話第...