卡片 1｜滑過會浮起＋放大
適合拿來放「主要選項」或「推薦方案」： 滑鼠移上去時，整張卡片會明顯浮起並放大一點，陰影也會變得更深。
背景漸層會緩慢旋轉、光球漂浮、卡片外框持續流動， 文字依序淡入，按鈕則有強陰影或呼吸光圈。 這些效果都不需要 JavaScript，只靠 CSS。
這裡展示三種不同風格的卡片動畫：滑過時浮起、3D 微旋轉，以及本身就持續漂浮的卡片。 你可以用在產品、方案、通路類型、設計風格分類等區塊。
適合拿來放「主要選項」或「推薦方案」： 滑鼠移上去時，整張卡片會明顯浮起並放大一點，陰影也會變得更深。
這張卡片在 hover 時會有輕微的 3D 旋轉感，看起來比較科技或實驗感， 可以運用在比較「主打」或「特殊」的內容上。
不用滑鼠經過就會小幅度上下漂浮，背景也會有慢慢變化的光影， 很適合用在「特別想被注意」的區塊，例如新產品或限時內容。
這一區示範一條會自動填滿的進度條，以及三個節點： 左邊節點有脈動光暈，中間節點常亮，右邊節點尚未啟動。 你可以用來表現流程、專案進度或導入階段。
這裡示範的是標題底線從左到右畫出來、段落文字一行行淡入的效果。 在實際的內容頁中，如果不希望畫面太吵，可以只保留這種程度的動態， 讓頁面有一點「長出來」的感覺，但不會造成閱讀負擔。
這一區示範的是：深色主視覺、漸層、光球飄動、強烈陰影，以及兩種不同風格的主按鈕。 你之後可以把文案改成產品或專案介紹，保留這種層級的效果。
這裡示範三種卡片效果：浮起、3D 旋轉、背景漸層動起來。 你在真正的頁面裡可以套在產品介紹、方案差異、通路類型等內容上。
滑鼠經過時，卡片會微微往上浮起並放大一點，陰影變深。 這種效果適合放在「主要選項」或「推薦方案」上。
滑過時會有輕微的 3D 旋轉感，視覺比較有「科技感」或 「展示感」，可以用在比較特別的產品或主打內容。
本身就是淡淡的色塊，滑鼠經過時背景漸層會動起來， 適合用在「重點提醒」、「活動專案」這種希望被注意到的區塊。
這一區模擬的是「導入流程／購買步驟」的呈現方式：整條背景換成深色漸層，搭配斜向紋理， 中間用一條亮色進度條和節點，讓流程看起來更有儀式感。
這裡有四種完全不同風格的按鈕：霓虹外框、底部發光、粗框切換、文字連結。 你可以挑一種當作整個網站的 CTA 主風格，讓所有「我要瞭解更多」、「預約」都長得一致。