CSS 說明與三爻卡

三爻卡

《易經》八卦的現代詮釋

乾 (qián)

天 (Heaven)

坤 (kūn)

地 (Earth)

震 (zhèn)

雷 (Thunder)

巽 (xùn)

風 (Wind)

坎 (kǎn)

水 (Water)

離 (lí)

火 (Fire)

艮 (gèn)

山 (Mountain)

兌 (duì)

澤 (Lake)

© 八卦符號展示。靈感源於《易經》。

卡片 CSS 技術說明

本頁面展示的三爻卡片運用了多種 CSS 技術來實現其獨特的視覺風格和互動效果。以下是主要的技術解析：

1. 卡片基本結構與佈局 (.trigram-card, .card-inner-border)

• 卡片 (.trigram-card) 使用 position: relative; 作為內部絕對定位元素的基準。
• overflow: hidden; 是關鍵，它裁剪了旋轉的輝光邊框，使其看起來像是卡片的邊框。
• 內部容器 (.card-inner-border) 使用 position: absolute; inset: 3px; 創建了一個比外部卡片略小的區域，形成邊框效果。其背景色與卡片主背景色相同。
• .card-inner-border 內部使用 display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 15px 10px; 來垂直排列並居中卦象和文字內容，元素從頂部開始。

2. 動態輝光邊框 (::before, ::after, @keyframes)

• 每張卡片的輝光邊框是通過其 ::before 和 ::after 偽元素實現的。
• 偽元素被設置為絕對定位，尺寸遠大於卡片 (top: -50%; left: -50%; width: 100%; height: 100%;)，並設置了 transform-origin: bottom right;。
• 背景使用 linear-gradient 創建從透明到指定顏色的漸變 (transparent, #45f3ff, #45f3ff)。
• @keyframes animateBorder 定義了一個從 0deg 到 360deg 的旋轉動畫。
• 偽元素應用此動畫 (animation: animateBorder 6s linear infinite;)，::after 偽元素有 animation-delay: -3s; 以產生兩個輝光交錯旋轉的效果。
• z-index: 1; 確保輝光在卡片主背景之下，但在 .card-inner-border 之下。

3. 卦象與文字內容 (.imgBx, .content, .yao)

• 卦象容器 (.imgBx) 設定了 margin-bottom: 10px;（此間距主要在內容非 `margin-top: auto` 時起作用）。
• 爻 (.yao) 的寬度為 100px，高度為 0.9rem，間距為 0.5rem，使其更為突出。
• 文字內容容器 (.content) 使用 margin-top: auto; 將其推至卡片內部可用空間的底部。padding-bottom: 5px; 確保底部留有少許空間。
• 卦名 (h2) 字體大小為 1.3em，含義 (.meaning) 字體大小為 0.95em。

4. 懸停效果 (.trigram-card:hover)

• 當滑鼠懸停在卡片上時，.trigram-card:hover 規則會觸發 transform: translateY(-10px); 使卡片輕微上移。
• 同時，box-shadow 也會改變，增強立體感。
• 所有這些變化都通過 transition 屬性實現平滑過渡。

5. 整體頁面佈局與響應式

• 頁面主體 (body) 使用 Flexbox 進行垂直佈局。
• 卡片容器 (.cards-container) 使用 display: flex; flex-wrap: wrap; justify-content: center; 實現卡片的自適應換行和居中排列。
• 卡片尺寸固定，但容器會根據螢幕寬度調整。

希望這些說明能幫助您理解卡片的 CSS 實現方式！