等待不再痛苦!幾個有趣的純CSS3 Loading動畫~

进度条

進度條是常用且需要重視的用戶體驗,用於表示事件的處理或加載狀態,製作這些loading進度條我們通常會使用GIF圖片來實現,但是這方法也有一些弊端,比如我要放大或改變顏色,這樣就不好再去做修改了。

要解決這些問題最好就是用程式來實現了,現在CSS3已經開始流行,是不是可以用CSS來實現呢?方法是有的,而且很簡單,看看今天DesignRock跟你分享的12個使用純CSS3編寫的進度條、Loading圖標和動畫都很棒喔!~

 

這些loading的icon 圖標動畫各有特色,有充電狀態、眼睛轉動、時鐘轉動動畫、加精的點點點等等,都是還不錯的設計~

css-loadding

DEMO

程式碼下載

 

 

有掃描雷達、類似陀螺的圓..等等

css3-loading-3

DEMO

下載頁面 : http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/

 

如果覺得DesignRock文章不錯的話,不妨也分享給你身邊的朋友和設計師們吧,謝囉!

 

 

 

 

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s