藉助CSS提供的animation與transform及filter濾鏡等屬性，咱們可使用CSS設置出精美的動畫效果，進一步可使用CSS對HTML頁面基本元素、圖標等進行動畫設計，如按鈕效果，頁面加載圖標等。本文主要介紹加載圖標動畫設計，並進行實例分析。html
CSS加載動畫設計web
實現要求及展現
本例設計實現自動旋轉的加載圖標設計，在圖標旋轉過程當中，動態改變顏色與狀態，實現效果以下所示：佈局
動態加載loading設計效果flex
基本語法說明
本例設計效果描述如上所示，一方面須要實現旋轉效果，另外一方面須要實現顏色變化，所需掌握知識點主要包括CSS濾鏡filter，動畫屬性animation與@keyframes關鍵幀的定義等。各種所需基本語法說明以下：動畫
一、flex佈局spa
經過使用flex佈局實現動畫層在web頁面中進行佈局與定位，本例應用到justify-content屬性與設計
align-items屬性實現動畫層在頁面水平與垂直方向進行居中顯示。orm
二、before與after僞元素htm
僞元素是在html文件代碼中不存在的元素，可是其可以在網頁瀏覽時表現出行爲與效果，與真實存在的元素相似。其中before指在元素前加入的內容，after表示在元素後加入的內容。如咱們在頁面中定義一個DIV層，則可以使用before在前前添加新的內容，顯示不一樣效果。代碼以下：blog
before元素使用實例
在該實例中咱們在dv表示的層以前添加了一個新的層效果，即.dv:before所定義的部分，頁面實際代碼中只有一個黃色層，生成的僞元素層爲綠色層，實現效果以下：
僞元素層效果
三、線性漸變與透明度漸變
CSS提供元素原色的漸變效果，主要漸變類型包括徑向漸變與線性漸變。本例須要使用線性漸變實現背景效果。線性漸變（Linear Gradients）能夠實現顏色漸變、透明的漸變等。如：
linear-gradient(0deg, blue, green 40%, red);
表示:從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最後以紅色結束;將其應用到咱們僞元素定義案例中則可呈現以下效果：
僞元素層漸變效果
除使用以上方法實現漸變以外，還能夠對透明度進行漸變設置，須要使用transparent參數表示透明。如：
linear-gradient(0deg,transparent,transparent 40%,red);則表示按照透明度進行漸變；
透明線性漸變效果以下圖所示：
現性漸變效果展現
四、圓形DIV與邊緣模糊設置
圓形DIV主要經過border-radius屬性設置，當其值設置爲50%時便可造成圓形，邊緣模糊主要經過濾鏡filter實現。使用blur()設置高斯模糊。實例效果以下所示：
圓形div與高斯模糊
本例實現效果描述如上圖所示，其中外層div設置radius爲50%，內層綠色部分設置高斯模糊。
五、動畫與旋轉基本知識
動畫效果主要經過animation屬性與@keyframes進行設置，前文已經進行了說明，本文再也不詳細說明，如需閱讀，請自行查閱。
實現代碼描述
旋轉的加載動態效果基於以上基本語法進行設計與開發，實現主要代碼表述以下：
本例實現完整代碼