個(gè)網(wǎng)站收集了很多 CSS 加載動(dòng)畫，代碼很簡單，效果很好，可以收藏以后查閱用。

關(guān)于 CSS Loaders

CSS Loaders 是一個(gè)收集了互聯(lián)網(wǎng)上很多加載動(dòng)畫效果代碼的網(wǎng)站，其中包含了動(dòng)畫效果的源代碼，方便像我們這樣的前端開發(fā)者來使用。

自從 CSS3 的動(dòng)畫屬性得到主流瀏覽器的支持以后，我們經(jīng)常看到使用 CSS 實(shí)現(xiàn)的各種加載動(dòng)畫效果，而這個(gè)網(wǎng)站就專門收集并且分類整理這些動(dòng)畫效果，無論是學(xué)習(xí)或者是查閱，甚至是二次修改來實(shí)現(xiàn)定制的需求，都能很好地滿足我。

網(wǎng)站特色

• 收集了超過 500 個(gè) web 動(dòng)畫加載效果，五花八門，幾乎覆蓋我們所見過的所有動(dòng)畫；
• 所有的動(dòng)畫都是通過 CSS3 來實(shí)現(xiàn)，沒有一行 JS 代碼；
• 所有的動(dòng)畫都只需要一個(gè) dom 元素，開發(fā)調(diào)用很簡單，代碼也很簡潔。

CSS 動(dòng)畫實(shí)現(xiàn)的 loading 有什么優(yōu)勢(shì)？

以前常規(guī)的動(dòng)畫加載效果是做一張 gif 格式的動(dòng)圖，需要加載時(shí)顯示圖片，加載完成后隱藏圖片。這種原始的方式有幾個(gè)缺點(diǎn)：

1. 動(dòng)圖占用空間大，而且很難壓縮；
2. 顯示效果不好，特別是在手機(jī)這種高清屏幕上，往往都會(huì)模糊；
3. 透明像素會(huì)有白邊，在非純色背景上顯示很糟糕；
4. 圖片確定后不能修改，如要要改變顏色、播放速度，需要重新制作。

這就是 gif 動(dòng)圖的弊端，相反，CSS 實(shí)現(xiàn)的加載效果，不僅動(dòng)畫流暢，還可以根據(jù)需要改變顏色和播放速度等，關(guān)鍵是占用空間很小。所以越來越多的開發(fā)者和設(shè)計(jì)師在前期規(guī)劃時(shí)，都會(huì)優(yōu)先考慮 CSS 動(dòng)畫來實(shí)現(xiàn)。

CSS Loaders 已經(jīng)幫我們把非常多的加載效果都整理好了，是一個(gè)非常好用的加載動(dòng)畫預(yù)覽和文檔網(wǎng)站。

開發(fā)上手

CSS Loaders 主頁是一個(gè)隨機(jī)的動(dòng)畫效果，顯示了該動(dòng)畫的 dom 結(jié)構(gòu)代碼，非常簡潔：

<div class="loader"></div>

所有的動(dòng)畫效果都是這個(gè)結(jié)構(gòu)，然后我們鼠標(biāo)懸停在動(dòng)畫上，就會(huì)顯示「copy the css」按鈕，點(diǎn)擊就會(huì)復(fù)制這個(gè) loader 的所有樣式，粘貼到我們的項(xiàng)目 css 中，動(dòng)畫就生效了，使用非常簡單。比如常見的圓圈加載動(dòng)畫的 CSS 源碼：

.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #514b82;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}

如果需要多個(gè)動(dòng)畫效果，我們可以直接修改 .loader 這個(gè) className，讓不同的動(dòng)畫效果對(duì)應(yīng)自己的 CSS，這是很基礎(chǔ)的 CSS 語法，這里就不展開說了。

網(wǎng)站的左邊做了不同動(dòng)畫類型的分類，我們可以點(diǎn)擊切換去查閱。

免費(fèi)開源說明

CSS Loaders 上所有動(dòng)畫效果的代碼都是公開可見的，而且得益于 CSS3 強(qiáng)大的動(dòng)畫支持，實(shí)現(xiàn)的代碼都很簡潔，我們直接復(fù)制使用就可以了。

↓↓點(diǎn)擊查看本次分享的網(wǎng)站。

CSS Loaders - 純 CSS 實(shí)現(xiàn)的各種動(dòng)畫加載效果，代碼簡潔，全都只需要用一個(gè)元素｜那些免費(fèi)的磚

臺(tái)ID：WEB_wysj(點(diǎn)擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（微信回復(fù)HTML5，獲取全套源碼）

● ● ●

HTML5標(biāo)準(zhǔn)已經(jīng)塵埃落定，未來的Web將會(huì)是由HTML5主導(dǎo)，當(dāng)然作為開發(fā)者對(duì)這一喜訊更為動(dòng)心。本文主要分享了15個(gè)無比華麗的HTML5/CSS3動(dòng)畫應(yīng)用，供大家參考學(xué)習(xí)。

1、HTML5/CSS3圖片選擇動(dòng)畫 可選擇多張圖片

今天我們來分享一款既炫酷又實(shí)用的HTML5圖片選擇特效，當(dāng)圖片被選中時(shí)，圖片上就會(huì)覆蓋一個(gè)半透明的層，上面有一個(gè)勾，并且在選中的時(shí)候圖片出現(xiàn)彈跳的動(dòng)畫效果。

2、純CSS3實(shí)現(xiàn)圖片復(fù)古效果 鼠標(biāo)滑過切換

今天我們要分享一款非常酷的圖片效果，這個(gè)效果在很多P圖軟件中經(jīng)常可以看到，就是對(duì)一張圖片進(jìn)行復(fù)古效果的渲染。這款CSS3圖片效果就實(shí)現(xiàn)了這個(gè)復(fù)古的特效，我們只要將鼠標(biāo)滑過圖片，就可以實(shí)現(xiàn)這一圖片復(fù)古效果了。

3、CSS3華麗的Tab菜單 帶小圖標(biāo)動(dòng)畫

之前我們分享過一款非常出色的CSS3 Tab菜單HTML5 SVG Tab滑塊菜單，結(jié)合SVG，Tab菜單實(shí)現(xiàn)非常靈活。今天我們要再來分享一款基于CSS3的華麗Tab菜單，這款Tab菜單的菜單項(xiàng)是一個(gè)個(gè)小圖標(biāo)，鼠標(biāo)滑過時(shí)，菜單項(xiàng)展示對(duì)應(yīng)文字，并出現(xiàn)展開的動(dòng)畫。

4、HTML5/CSS3書本翻頁3D動(dòng)畫

前段時(shí)間我們分享過很多牛叉的HTML5動(dòng)畫，如果你對(duì)HTML5感興趣，可以移步至HTML5動(dòng)畫欣賞學(xué)習(xí)。今天我們要分享一款基于HTML5和CSS3的書本翻頁3D動(dòng)畫，當(dāng)我們將鼠標(biāo)滑過書本時(shí)，書本就會(huì)自動(dòng)一頁頁翻過去，書本的3D效果非常不錯(cuò)。

5、HTML5 3D骨牌圖片特效 帶文字描述

今天分享一款很特別的HTML5 3D圖片特效，當(dāng)鼠標(biāo)滑過圖片時(shí)，平面的圖片即會(huì)呈現(xiàn)3D的效果，和這款HTML5 3D圖片折疊特效類似，也是通過鼠標(biāo)滑過來展現(xiàn)3D效果。另外，這款HTML5 3D骨牌圖片特效還可以設(shè)置圖片描述信息。

6、jQuery UI滑桿插件 可Tooltip提示

今天我們?cè)賮斫榻B一款實(shí)用的jQuery插件，是基于jQuery UI的。這款jQuery滑桿插件非常漂亮，可以設(shè)置多種顏色，再加上CSS3上運(yùn)用，可以讓滑桿的游標(biāo)變得有立體感，滑桿的Tooltip提示框也出現(xiàn)飛入飛出的動(dòng)畫效果。更多jQuery插件可以移步至jQuery插件欄目。

7、CSS3個(gè)人資料表單 分兩步驟表單

對(duì)于分步驟表單，我們之前也已經(jīng)有過介紹了，像這款HTML5分步驟注冊(cè)表單就非常不錯(cuò)，今天我們要來介紹另外一款分步驟表單，這是一款個(gè)人資料填寫表單，我們可以分兩步來填寫個(gè)人資料，每一步的切換都有淡入淡出的動(dòng)畫效果，你也可以回退到上一步繼續(xù)填寫。

8、HTML5/CSS3仿Facebook登錄表單

利用CSS3制作的登錄表單的確很漂亮，我們?cè)趆tml5tricks網(wǎng)站上也分享過幾款了，比如CSS3密碼強(qiáng)度驗(yàn)證表單可以顯示密碼的強(qiáng)度，這款純CSS3發(fā)光登錄表單更是絢麗多彩。今天我們要分享一款仿Facebook的登錄表單，無論從外觀還是功能上說，這款登錄表單還是挺接近Facebook登錄表單的。

9、HTML5/CSS3超酷進(jìn)度條 不同進(jìn)度多種顏色

這是一款線條狀的CSS3進(jìn)度條，這款進(jìn)度條有兩個(gè)特點(diǎn)：一是隨著進(jìn)度條的進(jìn)度更新，都會(huì)有數(shù)字百分比實(shí)時(shí)顯示，讓數(shù)據(jù)更加直觀；二是在不同的進(jìn)度階段，進(jìn)度條的顏色會(huì)有所變化，這樣能更好的反應(yīng)當(dāng)前的進(jìn)度狀態(tài)。加上黑色的背景，讓這款CSS3進(jìn)度條更加鮮亮起來。

10、CSS3 3D發(fā)光切換按鈕 模擬效果很逼真

剛剛我們發(fā)布過一款CSS3開關(guān)切換滑動(dòng)按鈕，應(yīng)該說出了有點(diǎn)3D立體的效果外，其他都很普通。現(xiàn)在我們要來分享一款更酷的CSS3開關(guān)切換按鈕，它不僅具有3D的效果，而且可以發(fā)光，當(dāng)開關(guān)處于打開狀態(tài)時(shí)，旁邊的小燈就會(huì)亮起來，然后燈光投射到開關(guān)上，效果挺逼真的。

11、HTML5線性圖表 圖表數(shù)據(jù)區(qū)域可著色

利用HTML5制作圖表插件也比較常見，我們也收集過幾款很實(shí)用的HTML5圖表插件，它們確實(shí)可以幫助我們?cè)诰W(wǎng)頁上直觀地展示數(shù)據(jù)。今天我們要再來分享一款實(shí)用的HTML5線性圖表插件，這款線性圖表可以在不同的數(shù)據(jù)區(qū)域內(nèi)繪制不同的顏色，讓每一個(gè)數(shù)據(jù)區(qū)域都非常明顯可見。

12、HTML5柱狀圖表 可合并多張圖表的數(shù)據(jù)

之前我們分享過好幾款不錯(cuò)的HTML5柱狀圖表了，像這款HTML5/CSS3水平柱狀圖表，非常簡單實(shí)用的圖表。今天我們要再來分享一款HTML5柱狀圖表，這款圖表插件可以將多張圖表的數(shù)據(jù)合并成一張圖表顯示，在圖表數(shù)據(jù)合并過程中產(chǎn)生融入的動(dòng)畫，挺不錯(cuò)的。

13、HTML5/CSS3提示框Tooltip動(dòng)畫

之前我們已經(jīng)分享過一款HTML5/CSS3分步提示框Tooltip ，不過這款提示框主要是用來分步操作提示的，不是真正的Tooltip。今天我們要分享一款利用CSS3實(shí)現(xiàn)的提示框Tooltip動(dòng)畫。當(dāng)鼠標(biāo)移到圖標(biāo)按鈕上時(shí)，就會(huì)在按鈕正上方彈出一個(gè)Tooltip提示框，并且伴有淡入淡出的效果。

14、HTML5/CSS3滑塊動(dòng)畫菜單 圖標(biāo)動(dòng)畫很酷

CSS3菜單我們之前已經(jīng)分享很多了，有3D菜單、下拉菜單、Tab菜單等，具體大家可以移步至CSS3菜單欄目下查找。今天我們要分享的這款HTML5/CSS3滑塊動(dòng)畫菜單非常酷，鼠標(biāo)滑過菜單項(xiàng)時(shí)會(huì)有一個(gè)漂亮的遮罩移動(dòng)過來，并且這款動(dòng)畫菜單還有非常酷的圖標(biāo)，菜單整體效果很大氣。

15、HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布

HTML5 Canvas還有一個(gè)比較實(shí)用的應(yīng)用，那就是網(wǎng)絡(luò)畫板，這樣我們就可以在網(wǎng)頁上直接進(jìn)行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡單實(shí)現(xiàn)網(wǎng)絡(luò)畫圖的功能，我們可以自定義筆刷的類型、粗細(xì)、顏色，也可以定義畫布的大小和背景顏色等。我們也可以對(duì)這款HTML5畫圖工具進(jìn)行擴(kuò)展，讓它的畫圖功能更加完善。

干貨！免費(fèi)領(lǐng)取騰訊高級(jí)講師網(wǎng)頁設(shè)計(jì)教程

點(diǎn)我領(lǐng)取

點(diǎn)擊下方“閱讀原文”結(jié)交更多有才華的設(shè)計(jì)師！

↓↓↓