Codepen 是近年來廣受歡迎的線上程式編輯器。與同類型的 jsFiddle 相比，Codepen 擁有更美觀的介面設計，進入網站後便能看到許多優秀的作品。
它的 EXPLORE 功能設計良好，首頁即展示各式各樣的範例，使用者還可以透過標籤搜尋特定內容，且分類細緻，從 Pen 到 Project 均有涵蓋，讓你能依據專案規模篩選適合的內容。此外，還能將喜歡的作品加入收藏，使 Codepen 不僅擁有優雅的設計，也兼具社群互動性，是一款出色的編輯器。
🔗 Codepen 網站：https://codepen.io/
以下程式碼設計了一張魔法卡片 (Magic Card)，當滑鼠懸停時，文字顏色會由透明變為亮藍色，並且卡片本身有旋轉漸變的光影效果，讓它看起來有種奇幻的感覺。
📌 設計要點
CSS 自訂屬性 (Custom Properties)：
--rotate 用來控制卡片的背景旋轉。
--card-height 和 --card-width 讓卡片尺寸自適應。
卡片外觀 (Card Styling)：
背景顏色 深藍 (#191c29)，讓光影效果更顯眼。
圓角 (border-radius) 為 6px，讓卡片有點圓潤但不完全圓形。
字體 (font-family) 使用 cursive，營造奇幻氛圍。
字體顏色 (color) 初始為透明 (rgb(88 199 250 / 0%))，滑鼠懸停時變成亮藍色 (rgb(88 199 250 / 100%))。
光影動畫 (Animated Border Effect)：
漸變背景 (linear-gradient)：
變色範圍從 #5ddcff → #3c67e3 → #4e00c2，形成藍紫色系的發光邊框。
旋轉動畫 (spin)：讓光影持續旋轉 (2.5s 無限循環)。
模糊陰影 (blur)：
filter: blur(calc(var(--card-height) / 6)) 讓卡片下方有發光效果，看起來更立體。
滑鼠懸停效果 (Hover Effects)：
文字顏色變化 (透明 → 亮藍)。
停止邊框動畫 (opacity: 0)，讓邊框光影效果消失。
連結樣式 (Link Styling)：
text-decoration: none; 移除底線。
color: #212534; 使用與背景接近的顏色，讓連結不搶眼但仍可見。
🛠 如何改進或客製化
✅ 改變顏色：
修改 linear-gradient 顏色，比如 紅橙系 (#ff5f6d → #ffc371) 或 綠藍系 (#43cea2 → #185a9d)。
✅ 調整卡片大小：
變大 (--card-height: 80vh;) 或變小 (--card-height: 50vh;)。
✅ 加上額外效果：
發光邊框 (box-shadow: 0px 0px 15px rgba(88, 199, 250, 0.8);) 讓卡片更亮。
✅ 增加更多動畫：
transform: scale(1.05); 讓滑鼠懸停時卡片稍微變大。
這樣的設計適合用來展示 遊戲卡片、NFT 卡片、會員卡 UI，甚至可以當作 魔法書封面效果！✨
在 Codepen 眾多功能中，最常被使用的當屬 Pen。它的優勢在於提供便捷的前端開發體驗，讓 HTML、CSS 和 JavaScript 的編寫與預覽變得直覺且高效。然而，由於 Pen 的編碼區塊是固定的，當程式碼行數較多時，閱讀與管理可能會變得較為困難。Pokemon Holo Card
🔗 Codepen 網站：https://codepen.io/
以下程式碼設計了一張魔法卡片 (Magic Card)，當滑鼠懸停時，文字顏色會由透明變為亮藍色，並且卡片本身有旋轉漸變的光影效果，讓它看起來有種奇幻的感覺。
📌 設計要點
CSS 自訂屬性 (Custom Properties)：
--rotate 用來控制卡片的背景旋轉。
--card-height 和 --card-width 讓卡片尺寸自適應。
卡片外觀 (Card Styling)：
背景顏色 深藍 (#191c29)，讓光影效果更顯眼。
圓角 (border-radius) 為 6px，讓卡片有點圓潤但不完全圓形。
字體 (font-family) 使用 cursive，營造奇幻氛圍。
字體顏色 (color) 初始為透明 (rgb(88 199 250 / 0%))，滑鼠懸停時變成亮藍色 (rgb(88 199 250 / 100%))。
光影動畫 (Animated Border Effect)：
漸變背景 (linear-gradient)：
變色範圍從 #5ddcff → #3c67e3 → #4e00c2，形成藍紫色系的發光邊框。
旋轉動畫 (spin)：讓光影持續旋轉 (2.5s 無限循環)。
模糊陰影 (blur)：
filter: blur(calc(var(--card-height) / 6)) 讓卡片下方有發光效果，看起來更立體。
滑鼠懸停效果 (Hover Effects)：
文字顏色變化 (透明 → 亮藍)。
停止邊框動畫 (opacity: 0)，讓邊框光影效果消失。
連結樣式 (Link Styling)：
text-decoration: none; 移除底線。
color: #212534; 使用與背景接近的顏色，讓連結不搶眼但仍可見。
🛠 如何改進或客製化
✅ 改變顏色：
修改 linear-gradient 顏色，比如 紅橙系 (#ff5f6d → #ffc371) 或 綠藍系 (#43cea2 → #185a9d)。
✅ 調整卡片大小：
變大 (--card-height: 80vh;) 或變小 (--card-height: 50vh;)。
✅ 加上額外效果：
發光邊框 (box-shadow: 0px 0px 15px rgba(88, 199, 250, 0.8);) 讓卡片更亮。
✅ 增加更多動畫：
transform: scale(1.05); 讓滑鼠懸停時卡片稍微變大。
這樣的設計適合用來展示 遊戲卡片、NFT 卡片、會員卡 UI，甚至可以當作 魔法書封面效果！✨
在 Codepen 眾多功能中，最常被使用的當屬 Pen。它的優勢在於提供便捷的前端開發體驗，讓 HTML、CSS 和 JavaScript 的編寫與預覽變得直覺且高效。然而，由於 Pen 的編碼區塊是固定的，當程式碼行數較多時，閱讀與管理可能會變得較為困難。
See the Pen Pokemon Card Holo Effect by 01 Scratchinai (@01-Scratchinai) on CodePen.
✨ Pokemon Holo Card ✨
這段程式碼用於設計一組 寶可夢卡片 (Pokemon Card) 搭配 Holo Effect， 模擬 稀有卡 (holographic effect)， 使其呈現出 閃耀光影、漸變色彩、互動感十足 的效果。
🔹 主要效果：
- ✅ 漸變色光影 (
linear-gradient) 讓卡片呈現變色效果 - ✅ 互動式 3D 旋轉，根據滑鼠移動傾斜
- ✅ Holo 閃爍效果，模仿真實的稀有卡光影變化
✨ 滑鼠懸停即可看到 Holo 卡片的特殊效果！✨