文章資訊
發布日期2024年11月11日
更新日期2024年11月12日
閱讀時間1 分鐘
分類metabizECLab
SEO 專欄與資料應用觀點
分享 AI 技術、數位轉型與產業應用的深度見解
關於 AI 技術與數位轉型的專業見解
選擇您感興趣的主題，深入了解更多專業內容
獲取最新的 AI 技術趨勢與數位轉型洞察
在現代網頁設計中，透過 CSS 動畫和選擇器的結合，我們可以創造出更具吸引力與互動性的網頁。本文將教你如何運用 […]
metabiz
深度技術文章
在現代網頁設計中，透過 CSS 動畫和選擇器的結合，我們可以創造出更具吸引力與互動性的網頁。本文將教你如何運用 CSS 來為元素添加動畫效果，並講解常見的選擇器，讓你輕鬆掌握這些重要的技術。
CSS選擇器是用來選擇HTML元素並應用樣式的規則。透過選擇器，開發者可以指定應用到網頁上的樣式，改變文字、顏色、間距等視覺效果。選擇器的主要功能是幫助我們選擇特定的HTML元素，使其符合指定的樣式。
class就像是這個標籤，你可以用同一個class來標記多個元素，並讓它們擁有相同的樣式設定。例如，你想讓多個按鈕有相同的外觀，就可以給它們設置相同的class。.）後接類別名稱來選擇擁有指定class屬性的元素。這種選擇器非常靈活，可以用於多個元素，共享相同的樣式。
<h1 class="special-heading">超強防疫利器</h1>
<h2 class="special-heading">IP網路廣告系統</h2>
.highlight {
background-color: yellow;
}
class="special-heading"的元素都會被選中，並設置背景色為黃色。id在網頁中也必須是唯一的。你可以用id選擇器來特別選中某個元素，就像在茫茫人海中，找到那個特定的擁有這個身分證的人。例如，當你需要給某一個特別的標題添加獨特樣式，就可以用id。#）後接ID名稱來選擇具有指定ID屬性的元素。由於ID在整個HTML中應是唯一的，所以ID選擇器通常用於選擇單一特定元素。
<h1 id="temporary-heading">智慧建築<br>雲端管理系統</h1>
#temporary-heading {
color: blue;
}
id="temporary-heading" 的 <h1> 元素會被選中並設置文字顏色為藍色。在設計網頁時，動畫可以為元素增添生動感和互動性。透過簡單的 CSS 代碼，我們可以為標題或按鈕等元素添加脈衝動畫效果。
首先，確保你在 HTML 中正確設置了目標元素，例如：
<h1 class="special-heading">超強防疫利器</h1>
<h2 class="special-heading">IP網路廣告系統</h2>
這兩個標題帶有 class="pulse-heading"，我們將針對這個 class 添加動畫效果。
接下來，我們在 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; /* 略微降低透明度 */
}
}
.pulse-heading 是我們選擇的目標元素，應用動畫 pulse，動畫時長為 1.5 秒並且持續循環。@keyframes pulse 是定義動畫的不同階段：0% 和 100% 表示動畫的起始與結束狀態，在這兩個階段，元素會維持原大小，透明度為 1。50% 則表示動畫的中間階段，在這個階段，元素會放大 10% 並且降低透明度至 0.7，創造出脈衝效果。此範例中，h1標籤尚未加入動畫，呈現靜止狀態。
此範例中，h1標籤加入脈衝動畫，呈現跳動狀態。
metabiz
