讓網頁元素「動起來」

 要讓網頁元素「動起來」，主要有三種層次：虛擬類別（互動）、過渡（平滑轉場）、以及 關鍵字動畫（自動循環）。

這些全部都可以透過 CSS 來達成，不需要寫複雜的程式碼。

---

1. 互動效果：:hover (滑鼠懸停)

這是最常見的「動起來」方式。當滑鼠游標移到元素上方時，改變它的樣子。

• 語法：選擇器:hover { 變更的樣式 }

CSS

/* 預設按鈕樣式 */
.btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* 當滑鼠移上去時變色 */
.btn:hover {
  background-color: #2980b9; /* 變成深藍色 */
}

---

2. 平滑轉場：transition

如果只用 :hover，顏色切換會很生硬。加上 transition 後，變化會像動畫一樣平滑。

• 語法：transition: 屬性 時間; (例如 0.3s 代表 0.3 秒)

CSS

.btn {
  background-color: #3498db;
  /* 告訴瀏覽器：所有屬性的變化都要在 0.3 秒內平滑完成 */
  transition: all 0.3s ease;
}

.btn:hover {
  transform: scale(1.1); /* 稍微放大 1.1 倍 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 增加陰影感 */
}

---

3. 自動動畫：@keyframes

如果你想要元素「自己一直動」（例如閃爍、旋轉、跳動），就需要定義「關鍵影格」。

步驟 A：定義動畫劇本

CSS

@keyframes bounce {
  0% { transform: translateY(0); }      /* 開始：位置 0 */
  50% { transform: translateY(-10px); } /* 中間：向上移動 10px */
  100% { transform: translateY(0); }    /* 結束：回到原位 */
}

步驟 B：將動畫套用到元素

CSS

.badge {
  display: inline-block;
  background: red;
  color: white;
  padding: 5px;
  /* 使用動畫：劇本名稱 時間 循環次數 */
  animation: bounce 1s infinite; 
}

---

4. 綜合範例：會動的按鈕與載入中圖示

你可以直接把這段代碼貼到你的 HTML 檔案中觀察效果：

HTML

<style>
  /* 互動按鈕 */
  .cool-button {
    background: linear-gradient(45deg, #ff6b6b, #f06595);
    border: none;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s; /* 平滑過渡 */
  }

  .cool-button:hover {
    letter-spacing: 2px; /* 文字間距變大 */
    box-shadow: 0 10px 20px rgba(240, 101, 149, 0.4);
    transform: translateY(-3px); /* 向上微浮 */
  }

  /* 旋轉載入圈圈 */
  .loader {
    width: 40px;
    height: 40px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite; /* 無限旋轉 */
    margin: 20px;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

<button class="cool-button">探索更多</button>

<div class="loader"></div>
<p>載入中...</p>

---

總結小筆記

• :hover：處理「使用者互動」。

• transition：讓變化的過程變得「優雅、有質感」。

• @keyframes：創造「自定義的連續動作」。