Pokémon Cards CSS 是什麼？寶可夢閃卡效果原理、151 展示與學習指南
Pokémon Cards CSS 用 CSS 與 Svelte 模擬寶可夢卡牌的立體轉動、反光與閃膜。本文拆解效果原理、劍盾與 151 版本差異、原作者示範，以及學習和網站採用時的效能與授權重點。
Pokémon Cards CSS 是 Simon Goellner（simeydotme）製作的開源網頁展示，讓平面的寶可夢卡圖隨游標轉動，表面的彩色反光也跟著移動。CSS 是控制網頁外觀的樣式語言，這個專案把它用在卡面的光澤、紋理與立體傾斜上。
如果你是從 Kōjin 3D Studio 的 Instagram Reel 看見這個效果，原始作品可以追溯到 Simon 的程式庫與展示網站。這是一個獨立開發者專案，並非寶可夢官方合作，也不代表寶可夢的數位卡牌遊戲採用了這套程式。
它值得研究的地方，是把「看起來像實體收藏品」拆成可理解的網頁效果。對剛接觸互動設計的人，先學卡牌如何回應游標、光澤如何限制在特定區域，比一開始複製整個展示更有收穫。本文會說明效果怎麼形成、兩個版本有何差異，以及如何選擇適合自己的學習與採用方式。
Pokémon Cards CSS 把一張圖片變成可探索的卡牌
原作者在 Pokémon Cards CSS 程式庫 說明，專案以 CSS 的變形、漸層、混色與濾鏡模擬劍盾時期卡牌的閃膜。Holofoil 指的是卡片表面隨角度出現光澤與色彩變化的閃膜，這也是作品主要模擬的視覺特徵。
使用者看到的變化可以分成兩件事。卡牌外框會隨游標位置傾斜，讓人感覺正在調整觀看角度。卡面上的亮點、色帶與紋理則各自移動，使圖像呈現受光的樣子。如果只有外框轉動，卡面仍然像一張被旋轉的圖片；光澤跟著變化，才會增加材質感。
Svelte 是協助開發者管理網頁元件與互動狀態的工具。作者用它接收互動、計算數值，再交給 CSS 改變畫面，因此「用 CSS 做閃卡」也包含 JavaScript 的配合。JavaScript 是處理網頁行為的程式語言，在這裡負責把游標移動轉成卡牌角度和光澤位置。
這種分工適合當作互動設計教材。畫面可以先拆成底圖、材質與操作回應，再分別修改，方便理解每一層對觀感的影響。學習者也能用自己的原創卡面做同類練習，不必把寶可夢角色當成效果成立的條件。
閃膜效果的核心：角度、光澤與遮罩一起變化
把程式拆開看，會比較容易理解為什麼滑鼠移動能改變整張卡牌。以下三個部分分別處理空間感、表面質感和反光範圍。
先把游標位置轉成卡牌角度
原始 Card.svelte 元件 會取得卡牌在畫面中的位置和大小，將游標換算成卡面內的相對座標，再計算旋轉與光澤的位置。這樣即使卡牌顯示尺寸不同，也能沿用相同的互動邏輯。
元件還使用彈簧式動畫，讓數值逐漸靠近目標，避免每次移動都直接跳到新角度。它也把互動更新安排到瀏覽器繪製畫面的時機，再由 CSS 自訂變數傳遞結果。自訂變數可以想成樣式共用的數值旋鈕，一組座標就能同時調整旋轉、色帶與亮點。
在 基礎樣式檔 中，透視設定與水平、垂直旋轉共同形成立體傾斜。這種做法是在網頁上改變卡面元素的呈現方式，讀者可以從 MDN 的 transform 說明 理解旋轉與縮放的基本行為。
用漸層與混色形成材質感
漸層是顏色在一個範圍內逐漸變化，既能畫出白色光斑，也能排列彩虹色帶。專案把這些色彩疊在卡圖和紋理之上，再用混色規則決定上下兩層如何合成。依 MDN 的 mix-blend-mode 說明，不同模式會改變元素與下方內容混合的結果。
例如 VMAX 樣式 結合紋理圖片、重複線性漸層與以游標為中心的放射狀漸層，並調整亮度和對比。它呈現的是多層效果共同移動的結果。只把一張彩虹圖片放在卡牌上，通常很難得到相同的光澤變化。
從設計角度看，色帶的大小、速度和紋理強度都會改變材質印象。練習時可以固定卡面，先只調整其中一個變數，比較畫面如何從塑膠反光變成金屬或閃膜感。這是依效果結構提出的學習方法，並非作者保證的材質還原程度。
用遮罩決定哪些地方會發光
遮罩的用途是限定效果出現的區域。卡片插畫、文字區和外框可以有不同的反光範圍，不必整張卡都套上同樣強度的光。原作者的展示頁也解釋了如何分開處理圖像視窗與背景閃膜，讓卡面不同位置呈現不同的光澤。
這一步直接影響可讀性。若亮點穿過數值與文字，效果可能吸引注意，卻也讓卡牌資訊難以閱讀。設計自己的會員卡、商品卡或收藏卡時，可以先保護文字區，再決定哪些位置值得加入材質細節。視覺效果應該幫助使用者認出重點，不能讓資訊跟著光斑一起消失。
劍盾版與 Pokémon 151 版，該從哪個開始？
兩個版本都由同一位作者製作，讀者可以依想研究的卡面效果選擇入口。下面的版本範圍以 2026 年 10 月 5 日查閱的原作者資料為準，不代表支援所有寶可夢卡牌系列。
| 展示版本 | 主要研究內容 | 適合的起點 |
|---|---|---|
| Pokémon Cards CSS | 劍盾時期的普通卡、反向閃膜、V、VMAX 與全圖等效果 | 想比較多種光澤和紋理的讀者 |
| Pokémon Cards 151 | 朱紫 151 主題卡牌的閃膜展示 | 想研究 151 視覺風格與球紋效果的讀者 |
在 劍盾版展示網站 中，作者依卡牌類型分類，並簡介各類效果的做法。普通卡的基本反光與 V、VMAX 的材質差異可以放在一起觀察，讓學習者分清楚哪些變化來自傾斜，哪些來自漸層與紋理。
151 專案 則提供另一個展示網站與示範影片。它的 球紋閃膜樣式 區分精靈球與大師球圖樣，透過遮罩、色彩層與游標位置改變紋理的顯現。這讓人更容易看到，相同互動邏輯可以配合不同素材，形成不同的表面質感。
如果剛開始學，建議先在劍盾版觀察一張普通卡，再看 VMAX，最後進入 151 的球紋。這個順序從單純的反光走向較複雜的材質，有助於避免一開始就被大量樣式檔淹沒。先能說清楚「新增這一層改變了什麼」，再增加效果，會比一次搬進全部卡種更好掌握。
看原作者影片時，觀察光澤如何跟著動作改變
原作者在 151 程式庫提供的示範影片約 27 秒，適合用來觀察卡牌傾斜和卡面反光的關係。圖片能讓人看清紋理，影片則補上它隨互動變化的過程。本文的配圖與影片取自原作者專案，圖說會標出來源。
觀看時，可以先只盯著卡牌邊框，確認轉動方向，再把注意力移到光帶。最後觀察紋理是不是整張均勻發亮，或只在某些位置與角度出現。把同一段畫面分成這幾次觀察，才能分辨卡牌轉動與閃膜變化各自做了什麼。
錄影呈現的是作者當時的展示畫面，無法代替自己網站的效能測量。若想體驗即時互動，可以開啟 Pokémon 151 展示頁 操作卡牌，再回頭查看相應的樣式。將畫面、互動和原始程式碼放在一起看，會比只收藏短影片更有學習價值。
原作者 151 專案示範影片，約 27 秒，展示卡牌的轉動與閃膜變化。 影片來源：Simon Goellner（simeydotme）原作者專案。
學習值得，放進網站要先縮小範圍
我會把 Pokémon Cards CSS 推薦給想研究介面材質的人，但採用到產品時，建議先從單張重點卡牌開始。作者在 Issue #19 明確說明，這個程式庫定位是展示作品，並非可以直接安裝、套用到各種應用程式的模組。他也提醒多層閃膜效果對網站效能的負擔很高。
這個提醒會改變實作順序。卡牌效果越多，頁面需要處理的圖層與畫面合成也越複雜，因此不能從展示好看就推論成大量卡牌同時顯示仍然流暢。文章沒有對手機或電腦做效能實測，也沒有證據可以給出適用於所有裝置的卡牌數量上限。
想用在自己的介面，可以依以下順序做小型原型。原型是用來驗證想法的初步版本，這裡的目的就是確認效果是否值得保留。
- 用一張自有或已取得授權的卡面，先完成基本的傾斜與反光。
- 保持其他設定不變，加入一層紋理，確認是否改善視覺辨識。
- 在預期使用的手機和電腦上檢查捲動、點選與文字閱讀是否順暢。
- 為不需要動態效果的情境保留靜態卡面，再決定是否擴充卡牌數量。
如果需求主要是傾斜與光澤，可以先研究同作者的 Hover Tilt。截至上述查詢日，作者提供 Svelte 元件與 Web Component，後者是可供不同網頁框架使用的自訂元素。這個入口較接近可採用的元件，但仍不能直接視為完整複製所有寶可夢閃膜的方案。
已有動態網頁設計經驗、想比較其他材質效果的讀者，也可以延伸了解另一種以圖形運算呈現特效的工具。
延伸閱讀：不用自己寫 Shader，也能做出液體、玻璃與粒子效果！Canvas UI 讓網頁特效一行指令就能裝上
GPL 允許商業使用，卡圖與素材仍須分開確認
Pokémon Cards CSS 程式庫的 LICENSE 採 GNU GPL 第三版。這是一種開源授權，允許使用、修改與依條款散布程式碼。GNU 官方 FAQ 也明確說明，GPL 允許商業銷售，不能把它解讀成「只能非商用」。
使用 GPL 程式碼時，仍要依實際修改與散布方式履行條款，包括相應的授權與原始碼提供要求。文章介紹的視覺做法、直接採用專案程式，以及重新散布改版，是不同的使用情境，不能只靠一個「開源」標籤判斷所有義務。
寶可夢角色、卡圖與商標屬於另一層權利。專案開放程式碼，不會因此授權第三方把寶可夢卡面用成自己的品牌素材。原程式庫也列出部分背景與星系閃膜素材的來源，因此採用時要一併追查圖片和紋理，不能只閱讀最上層的程式授權。
比較容易管理的練習方式，是保留對原作者的來源標示，使用自己的卡面與紋理，再依採用的程式碼履行授權條件。即使改用 Hover Tilt，也應閱讀它自身的授權檔。不同專案不能因為作者相同，就推定使用條件完全一致。
常見問題
Pokémon Cards CSS 需要 AI 才能做嗎？
這個專案的核心是網頁互動與樣式效果，運作不需要生成式 AI。可以把它當成理解卡面材質的範例，學會看游標位置、角度與圖層如何配合。
它能直接做成寶可夢對戰遊戲嗎？
程式庫提供的是卡面展示效果，不等於完整對戰遊戲。遊戲規則、帳號、對戰連線和其他功能仍需要另外開發，卡圖與品牌的使用權也要分開處理。
完全不會寫程式，可以從哪裡開始？
先開原作者展示頁操作普通卡，觀察卡面隨游標移動的變化，再比較較複雜的卡種。接著學習 CSS 的旋轉、漸層和反光概念，會比直接修改整套專案更容易建立理解。
能直接安裝 Pokémon Cards CSS 套件嗎？
作者把它定位為展示程式庫，並在 Issue #19 說明它不是可安裝的 npm 模組。npm 是 JavaScript 常用的套件管理工具。若想找元件形式的入口，可以改看原作者另行提供的 Hover Tilt 文件。
從一張原創卡面開始，學會控制每一層效果
對初學者，我建議把第一次練習的完成標準放在「能解釋卡牌為什麼跟著動、哪些區域為什麼發亮」。先做一張原創卡面，只保留需要的傾斜與光澤，再逐層加入紋理。這樣每增加一個效果，都能判斷它是否真的改善畫面。
對準備採用到網站的人，能在目標裝置順暢操作、保留文字可讀性並整理清楚素材來源，才是繼續擴充的依據。當這些條件滿足，再把單張卡牌擴展成收藏展示或商品細節，會有更明確的設計理由。
可以先開啟 原作者劍盾版展示，挑一張卡牌觀察，再查看對應的 CSS。將短影片裡的視覺印象轉成自己能理解和調整的參數，就是這個專案最實用的學習成果。
