在現代網頁設計中,透過 CSS 動畫和選擇器的結合,我們可以創造出更具吸引力與互動性的網頁。本文將教你如何運用 CSS 來為元素添加動畫效果,並講解常見的選擇器,讓你輕鬆掌握這些重要的技術。
一、CSS選擇器的基本介紹
什麼是CSS選擇器?
CSS選擇器是用來選擇HTML元素並應用樣式的規則。透過選擇器,開發者可以指定應用到網頁上的樣式,改變文字、顏色、間距等視覺效果。選擇器的主要功能是幫助我們選擇特定的HTML元素,使其符合指定的樣式。
二、常用CSS選擇器
1. 類別選擇器(如:.class name)
- Class就像是標籤或身份:想像你在班上,很多人可能都是「學生」,你們都有共同的特性或行為。
class
就像是這個標籤,你可以用同一個class
來標記多個元素,並讓它們擁有相同的樣式設定。例如,你想讓多個按鈕有相同的外觀,就可以給它們設置相同的class
。 - 類別選擇器使用點號(
.
)後接類別名稱來選擇擁有指定class屬性的元素。這種選擇器非常靈活,可以用於多個元素,共享相同的樣式。
範例: HTML:
超強防疫利器
IP網路廣告系統
CSS:
.highlight {
background-color: yellow;
}
- 上述範例中,所有擁有
class="special-heading"
的元素都會被選中,並設置背景色為黃色。
ID選擇器(如:#id name)
- ID就像是身分證:每個人都有一個獨一無二的身分證號碼,同樣地,每個
id
在網頁中也必須是唯一的。你可以用id
選擇器來特別選中某個元素,就像在茫茫人海中,找到那個特定的擁有這個身分證的人。例如,當你需要給某一個特別的標題添加獨特樣式,就可以用id
。 - ID選擇器使用井號(
#
)後接ID名稱來選擇具有指定ID屬性的元素。由於ID在整個HTML中應是唯一的,所以ID選擇器通常用於選擇單一特定元素。
範例: HTML:
智慧建築
雲端管理系統
CSS:
#temporary-heading {
color: blue;
}
- 此範例中,擁有
id="temporary-heading"
的<h1>
元素會被選中並設置文字顏色為藍色。
2. ID選擇器的限制與優缺點:
- 優點:快速、精確地選擇特定元素。
- 缺點:不建議頻繁使用,因為ID應保持唯一性,過多使用會影響樣式的靈活性。
三、在自訂 CSS 中添加脈衝動畫效果
在設計網頁時,動畫可以為元素增添生動感和互動性。透過簡單的 CSS 代碼,我們可以為標題或按鈕等元素添加脈衝動畫效果。
1. HTML 結構
首先,確保你在 HTML 中正確設置了目標元素,例如:
超強防疫利器
IP網路廣告系統
這兩個標題帶有 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標籤加入脈衝動畫,呈現跳動狀態。