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

由李介介 · 已發表 2017-06-04 · 已更新 2017-06-26

一個網頁設計師除了要有美感與基礎的程式語言知識，也要會一些 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

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

喜歡請按讚，收藏請用分享