一個網頁設計師除了要有美感與基礎的程式語言知識，也要會一些 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
多款層疊效果，你可以將滑鼠停留在上面看看效果
訂閱文章
輸入 e-mail 即可訂閱最新文章