30款酷炫的CSS3網頁設計動畫效果 , 你一定得看看!!!

一起來看看，30款優秀的CSS3動畫應用效果吧 ! 內容包含了Loading動畫、Menu效果、物件動畫效果、按鈕觸發效果...等等，讓你提前體驗，未來CSS3普及後的不同網頁設計前端視覺效果 ! 目前在製作這些動畫特效 , 其實過程上還是挺麻煩的 , 相信未來會有更多針對CSS3動畫設計所研發的開發工具 , 到時候就真的是CSS3世代的來臨 !

CSS Loading Animation By patrikhjelm

7個彩色垂直色點讀取動畫效果

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Elastic SVG Sidebar Material Design by suez

側邊欄效果設計 (向右拉動白色區塊，可看到效果)

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Animated Shopping Cart Icon by jonitrythall

一些可愛的購物車動畫元素，頁面往下滾動還有更多圖示

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Hamburger CSS3 only animation by Dawid Krajewski

開合按鈕ICON CSS3動畫效果

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

404 animated Character By With An Es

404頁面效果動畫

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

CSS Mars Landing by mgitch

火星登入小動畫

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

The Avenger By mariosmaselli

復仇者聯盟動畫設計，霍克吶喊~~~

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Day / Night toggle By jsndks

白天晚上切換按鈕 (可點選切換看看效果)

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Google Now 3rd party app by codecalm

Google Now third party apps 動畫

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Clo clo By judag

行走的公雞動畫

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Menu icon animation by mariusbalaj

卷軸拉動選單動畫效果 (可拉動卷軸看看效果)

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Another CSS Preloader by Maseone

另一款網頁讀取載入效果動畫設計 (這個設計Shawn還蠻喜歡的)

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Submit button by auginator

送出按鈕效果設計(此按鈕還帶有送出Loading動畫，可以點擊按鈕看看效果)

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Particle button By igcorreia

按鈕滑鼠Hover動畫特效 !! (這個效果非常酷阿)

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Gooey button By Lucas Bebber

Menu效果設計(帶果凍動畫效果，可點擊按鈕看看效果)

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Flipside button By hakimel

浮動提示視窗動畫效果設計(帶翻轉效果，效果突出!)

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

True hamburger menu! By CharlesSmart

漢堡開闔按鈕效果動畫

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Cruisin’ by yy

機車效果動畫

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

3D cube wave By waddington

3D方塊擺動特效!

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Signature animation By drygiel

簽名動畫特效

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Background gradient animation By quasimondo

背景漸層動畫 (這個Shawn之前有拿來應用於案件背景中過)

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Star wars toggle icon By rss

另一款開闔按鈕動畫特效

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

GIF Style animation By jascha

讀取圖片點陣漸變清晰效果

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Focus in/out input animation By fluxus

文字欄輸入特效 (左上角的筆有寫作中動畫效果)

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Chromatic triangleBy felipedefarias

三角顏色漸層動畫效果

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Coffee maker By thisisroger

製作咖啡動畫範例特效

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Chrome Dinosaur By nickspiel

數碼(點陣)恐龍動畫特效

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

CSS shake By elrumordelaluz

各式各樣shake(震動)效果設計 (將你的滑鼠移動到所有圖片上看看 ).

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Newton’s Cradle Loader By All Things Smitty

另一款Loading特效

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Launch the Modal By koolhaus

提示訊息效果

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Walking Robot By P233

機器人走路特效

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.

Flexing Pagination Arrows By Hakim

頁碼效果，可點選左右標籤查看動畫效果

See the Pen zGYBgy by mathias millioud (@tbnt) on CodePen.