在現代網頁設計中，透過 CSS 動畫和選擇器的結合，我們可以創造出更具吸引力與互動性的網頁。本文將教你如何運用 CSS 來為元素添加動畫效果，並講解常見的選擇器，讓你輕鬆掌握這些重要的技術。
一、CSS選擇器的基本介紹
什麼是CSS選擇器？
CSS選擇器是用來選擇HTML元素並應用樣式的規則。透過選擇器，開發者可以指定應用到網頁上的樣式，改變文字、顏色、間距等視覺效果。選擇器的主要功能是幫助我們選擇特定的HTML元素，使其符合指定的樣式。
二、常用CSS選擇器
1. 類別選擇器（如：.class name）
- Class就像是標籤或身份：想像你在班上，很多人可能都是「學生」，你們都有共同的特性或行為。
class就像是這個標籤，你可以用同一個class來標記多個元素，並讓它們擁有相同的樣式設定。例如，你想讓多個按鈕有相同的外觀，就可以給它們設置相同的class。 - 類別選擇器使用點號（
.）後接類別名稱來選擇擁有指定class屬性的元素。這種選擇器非常靈活，可以用於多個元素，共享相同的樣式。
範例： HTML：
<h1 class="special-heading">超強防疫利器</h1>
<h2 class="special-heading">IP網路廣告系統</h2>
CSS：
.highlight {
background-color: yellow;
}
- 上述範例中，所有擁有
class="special-heading"的元素都會被選中，並設置背景色為黃色。
ID選擇器（如：#id name）
- ID就像是身分證：每個人都有一個獨一無二的身分證號碼，同樣地，每個
id在網頁中也必須是唯一的。你可以用id選擇器來特別選中某個元素，就像在茫茫人海中，找到那個特定的擁有這個身分證的人。例如，當你需要給某一個特別的標題添加獨特樣式，就可以用id。 - ID選擇器使用井號（
#）後接ID名稱來選擇具有指定ID屬性的元素。由於ID在整個HTML中應是唯一的，所以ID選擇器通常用於選擇單一特定元素。
範例： HTML：
<h1 id="temporary-heading">智慧建築<br>雲端管理系統</h1>
CSS：
#temporary-heading {
color: blue;
}
- 此範例中，擁有
id="temporary-heading"的<h1>元素會被選中並設置文字顏色為藍色。
2. ID選擇器的限制與優缺點：
- 優點：快速、精確地選擇特定元素。
- 缺點：不建議頻繁使用，因為ID應保持唯一性，過多使用會影響樣式的靈活性。
三、在自訂 CSS 中添加脈衝動畫效果
在設計網頁時，動畫可以為元素增添生動感和互動性。透過簡單的 CSS 代碼，我們可以為標題或按鈕等元素添加脈衝動畫效果。
1. HTML 結構
首先，確保你在 HTML 中正確設置了目標元素，例如：
<h1 class="special-heading">超強防疫利器</h1>
<h2 class="special-heading">IP網路廣告系統</h2>
這兩個標題帶有 class="pulse-heading"，我們將針對這個 class 添加動畫效果。
2. 撰寫 CSS 動畫
接下來，我們在 CSS 中定義動畫效果。你可以將這段代碼添加到網頁中的自訂 CSS 區域：
/* 針對 pulse-heading 類別應用動畫 */
.pulse-heading {
animation: pulse 1.5s infinite; /* 1.5秒的脈衝動畫，無限循環 */
}
/* 定義脈衝動畫的 keyframes */
@keyframes pulse {
0%, 100% {
transform: scale(1); /* 起始與結束狀態，維持原大小 */
opacity: 1; /* 完全顯示 */
}
50% {
transform: scale(1.1); /* 中間狀態，放大 10% */
opacity: 0.7; /* 略微降低透明度 */
}
}
3. CSS 動畫解釋
.pulse-heading是我們選擇的目標元素，應用動畫pulse，動畫時長為 1.5 秒並且持續循環。@keyframes pulse是定義動畫的不同階段：0%和100%表示動畫的起始與結束狀態，在這兩個階段，元素會維持原大小，透明度為1。50%則表示動畫的中間階段，在這個階段，元素會放大 10% 並且降低透明度至0.7，創造出脈衝效果。
效果展示
Before-沒有動畫
此範例中，h1標籤尚未加入動畫，呈現靜止狀態。
After-加入動畫
此範例中，h1標籤加入脈衝動畫，呈現跳動狀態。