整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
助CSS提供的animation與transform及filter濾鏡等屬性，我們可以使用CSS設置出精美的動畫效果，進一步可以使用CSS對HTML頁面基本元素、圖標等進行動畫設計，如按鈕效果，頁面加載圖標等。本文主要介紹加載圖標動畫設計，并進行實例分析。
CSS加載動畫設計
本例設計實現自動旋轉的加載圖標設計，在圖標旋轉過程中，動態改變顏色與狀態，實現效果如下所示：
動態加載loading設計效果
本例設計效果描述如上所示，一方面需要實現旋轉效果，另一方面需要實現顏色變化，所需掌握知識點主要包括CSS濾鏡filter，動畫屬性animation與@keyframes關鍵幀的定義等。各類所需基本語法說明如下：
1、flex布局
通過使用flex布局實現動畫層在web頁面中進行布局與定位，本例應用到justify-content屬性與
align-items屬性實現動畫層在頁面水平與垂直方向進行居中顯示。
2、before與after偽元素
偽元素是在html文件代碼中不存在的元素，但是其能夠在網頁瀏覽時表現出行為與效果，與真實存在的元素類似。其中before指在元素前加入的內容，after表示在元素后加入的內容。如我們在頁面中定義一個DIV層，則可使用before在前前添加新的內容，顯示不同效果。代碼如下：
before元素使用實例
在該實例中我們在dv表示的層之前添加了一個新的層效果，即.dv:before所定義的部分，頁面實際代碼中只有一個黃色層，生成的偽元素層為綠色層，實現效果如下：
偽元素層效果
3、線性漸變與透明度漸變
CSS提供元素原色的漸變效果，主要漸變類型包括徑向漸變與線性漸變。本例需要使用線性漸變實現背景效果。線性漸變（Linear Gradients）可以實現顏色漸變、透明的漸變等。如：
linear-gradient(0deg, blue, green 40%, red);
表示:從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結束;將其應用到我們偽元素定義案例中則可呈現如下效果：
偽元素層漸變效果
除使用以上方法實現漸變之外，還可以對透明度進行漸變設置，需要使用transparent參數表示透明。如：
linear-gradient(0deg,transparent,transparent 40%,red);則表示按照透明度進行漸變；
透明線性漸變效果如下圖所示：
現性漸變效果展示
4、圓形DIV與邊緣模糊設置
圓形DIV主要通過border-radius屬性設置，當其值設置為50%時即可形成圓形，邊緣模糊主要通過濾鏡filter實現。使用blur()設置高斯模糊。實例效果如下所示：
圓形div與高斯模糊
本例實現效果描述如上圖所示，其中外層div設置radius為50%，內層綠色部分設置高斯模糊。
5、動畫與旋轉基本知識
動畫效果主要通過animation屬性與@keyframes進行設置，前文已經進行了說明，本文不再詳細說明，如需閱讀，請自行查閱。
旋轉的加載動態效果基于以上基本語法進行設計與開發，實現主要代碼表述如下：
本例實現完整代碼
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！
http://jsfiddle.net/rd4L30m8/
甜甜圈動畫
甜甜圈動畫
http://jsfiddle.net/rd4L30m8/1/
大小圓點
大小圓點
http://jsfiddle.net/rd4L30m8/2/
波浪動畫
波浪動畫
http://jsfiddle.net/rd4L30m8/3/
翻轉動畫
翻轉動畫
http://jsfiddle.net/rd4L30m8/4/
彈跳動畫
彈跳動畫
然互聯網的連接速度已經變得越來越快，但是在登錄一些網站時，難免會出現等待網頁的加載的時候。而設計師們也挖空心思的使用各種創意動畫，讓你的等待時間變得有趣，不至于很痛苦。
加載程序顯示了進程正在運行。然而，為了確保你在等待完成加載的過程前不會離開，加載程序的秘密就在于那些注意細節的有趣動畫。在本文中，你會發現 20 個很棒的加載動畫，供你選擇與參考。同時，你可以將它們下載并使用在自己的網站或項目上。
一起來 Enjoy 吧！
譯者注： 以下 20 個加載動畫，均來自 CodePen.
作者：@CKH4
這是一個利用 Slim+CSS 預處理器 Stylus 實現的簡單動畫。作者寫代碼很精煉、簡潔。
作者：@jackrugile
為客戶端改良的純 CSS 實現的彩虹加載動畫。
作者：@mr_alien
為了將用戶重新定向到另一個頁面，而利用 HTML+CSS 實現的加載動畫。
作者：@mattiabericchia
純 CSS 實現的循環加載動畫。
作者：@jackrugile
CSS+JS 實現的艷麗火花效果的 Canvas 加載動畫。
作者：@jonathansilva
用 CSS3 和 Html 制作的無限加載動畫。
作者：@ispal
純 CSS 實現的樓梯循環加載動畫。
作者：@code_dependant
Haml+Sass 實現的循環加載動畫。
作者：@majci23
純 CSS 實現的循環加載動畫。
作者：@FilipVitas
HTML +Sass 實現的魔方加載動畫。
作者：@rss
由 Mikael Edwards 設計并由 R?zaSel?ukSaydam 為 Peeek 開發的加載動畫。利用 Haml + SCSS 實現的。
作者：@dghez
純 SCSS 實現的正方形加載動畫。
作者：@MarcMalignan
利用 CSS 與少量的 jQuery 實現的雞尾酒加載動畫。
作者：@TheDutchCoder
靈感啟發！一個純 CSS 實現的 iMac/iPad/iPhone 變換加載動畫。
作者：@dan_reid
受到 polygon.com 網站啟發制作的加載動畫，利用 Haml+SCSS 實現的。
作者：@depy
一款純 CSS 加載動畫，創意還是蠻有意思的。
作者：@tstoik
利用 SCSS 寫的很酷的加載動畫。
作者：@samueljweb
利用棍狀圖形實現的加載動畫。
作者：@tomchewitt
純 CSS 實現的有趣的加載動畫。
作者：@redouglas
一個簡單的旋轉加載動畫。
如果覺得文章不錯，不妨點個贊。^_^
注：
本文在翻譯的基礎上，補充了相應的解釋。或許能對你起到參考與幫助的作用；
本文版權歸原作者所有。如需轉載譯文，煩請注明出處，謝謝！
由于頭條號暫不支持站外跳轉，想了解詳細項目的朋友，可以瀏覽器中打開
此地址：http://t.cn/RIX6QyW
英文原文：20 Awesome Animated Loaders and Spinners
作者： Nancy Young
譯者：IT程序獅
譯文源自：http://www.jianshu.com/p/6d3aafe8240f
推薦！設計師與程序員不能錯過的 10 個酷站
CodePen上值得關注的 7 款 CSS 動畫
超贊！37款免費的 HTML5 和 CSS3 加載與預載動畫
2017 年你應該學習的編程語言、框架和工具
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
