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