網頁設計-五款圖卡堆疊效果，含原始碼下載

一個網頁設計師除了要有美感與基礎的程式語言知識，也要會一些 UI、UX 的運用，但是使用者經驗是需要花時間多看網頁，才有辦法得到這些視覺經驗，可是有些網頁效果看到時覺得很棒，但又不知怎麼去製作，讓很多網頁前端設計非常的苦惱

介介收集了幾款網頁互動式效果，每個效果都有範例頁面與原始碼可供下載，這些範例都是從 codepen.io 收集的，這個網站是一個前端設計師與後端工程師協作的技術社群，能讓大家互相參考彼此的設計與後台語法，下面是一些圖卡堆疊效果，非常適合在僅有的畫面中做更多訊息的呈現，分享給大家參考

 

Card Stack Animation Made by Brandon Ward

按下 Next step 依照順序的方式切換層疊圖卡的效果

原始碼檔案下載｜觀看範例頁面

 

 

Card Stack Made by Lane Olson

一堆卡當用戶滑鼠懸停（或輕敲）時，它們會立即展開，用戶可以懸停（或點擊）每張卡片以查看

原始碼檔案下載｜觀看範例頁面

 

 

Cards Stack Made by Jermaine

CSS3 卡片堆疊效果，運用了一些 jQuery

原始碼檔案下載｜觀看範例頁面

 

 

Comment Card Animation Made by Shaw

替換式的層疊卡片效果

原始碼檔案下載｜觀看範例頁面

 

 

Stacked Cards Hover Effects Made by Kyle Brumm

多款層疊效果，你可以將滑鼠停留在上面看看效果

原始碼檔案下載｜觀看範例頁面