網頁動畫怎麼用才不會太花？新北網站的文字動畫、按鈕效果和慶祝特效

最後更新：2026/10/13

新北一間補習班的網站改版，設計師把能動的都讓它動了：標題一個字一個字跳出來、圖片從四面八方飛進來、按鈕一直在閃。家長打開網頁，第一個反應是「好熱鬧」，第二個反應是「報名按鈕在哪裡」。

動畫是用來引導注意力的。每多一個會動的東西，就多一個搶走注意力的東西。這篇介紹四個「小而有用」的效果：標題浮出、螢光筆重點、會回應的按鈕、完成訂單時的慶祝紙花，每一個都只有幾行，也都照顧到不喜歡動畫的使用者。

不想自己改？把這篇交給 AI

把這篇的網址（或全文）連同下面這段話貼給 AI：

我的網站是 WordPress。我想照下面這篇文章，加上文章介紹的效果（標題浮出、螢光筆重點、按鈕回應、完成訂單的紙花），而且要照顧到設定「減少動態效果」的人。
請先問我：我想用哪幾個效果、用在哪幾頁、我用的佈景主題。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）

改之前先備份，密碼不要貼給 AI。

標題浮出：只播一次

頁面打開時，最重要的那句標題從下方輕輕浮上來，會把視線帶到這裡。重點是只播一次、動作要短：

/* 標題由下往上浮出，只播一次 */
.rise {
  display: inline-block;
  animation: rise .8s ease-out both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.8s 是 0.8 秒，ease-out 讓動作先快後慢，看起來比較自然；both 讓標題在動畫開始前就停在起點、結束後停在終點，不會閃一下。一頁只放一兩個這樣的動畫，其他內容安安靜靜出現就好。

螢光筆重點：比換顏色更好讀

想強調標題裡的幾個字，與其換一個顏色，不如在字下面畫一道螢光筆。可以讓它在標題浮出之後才慢慢畫出來：

/* 重點字底下畫一道螢光筆，等 0.6 秒再畫 */
.marker {
  background: linear-gradient(transparent 60%, #fff710 60%) no-repeat;
  background-size: 0% 100%;
  animation: marker 1s .6s ease-out forwards;
}
@keyframes marker {
  to { background-size: 100% 100%; }
}

用法是 <h1 class="rise">網站做好，<span class="marker">客人自己找上門</span></h1>。漸層的上面 60% 是透明的、下面 40% 是黃色，看起來就像螢光筆畫過字的下半部；動畫讓黃色的寬度從 0 長到 100%。這段文字在手機上換行時，兩行都會畫到，我們用手機寬度看過。

標題的裝飾不一定要動。底線、色塊、左邊一條粗線、前面一個小圖示，都是常見又耐看的標題設計；同一個網站選一兩種固定用，整站看起來才一致。

會回應的按鈕

按鈕的效果，目的是告訴使用者「你可以按這裡」「你按到了」。滑鼠移上去時往上浮一點，按下去時縮回來，就像按到一顆真的按鈕：

/* 按鈕：滑過時往上浮一點，按下去縮回來 */
.btn {
  display: inline-block;
  padding: 14px 32px;
  color: #1d1d1f;
  text-decoration: none;
  background: #62e79e;
  border: 2px solid #1d1d1f;
  border-radius: 999px;
  box-shadow: 0 4px 0 #1d1d1f;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #1d1d1f;
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #1d1d1f;
}
.btn:focus-visible {
  outline: 3px solid #ff497c;
  outline-offset: 3px;
}

有兩個細節常被忽略。第一，:focus-visible 和 :hover 寫在一起：用鍵盤 Tab 鍵瀏覽網頁的人，按鈕被選到時也會有同樣的效果，再加一圈明顯的外框，才知道現在停在哪裡。第二，transition 只寫要變化的屬性，不要寫 all，瀏覽器比較省力，也不會有意想不到的東西跟著動。

慶祝紙花：用在對的時刻

網路上有很多彩色紙花、煙火的特效，放在首頁很吵，放在「訂單完成」的感謝頁卻剛剛好：客人剛做完一個決定，給一點小小的慶祝。下面這段只在 WooCommerce 的感謝頁灑一次紙花，用的是一個很小的開源套件 canvas-confetti：

// 訂單完成的感謝頁，灑一次彩色紙片
add_action('wp_footer', function () {
    if (!function_exists('is_order_received_page') || !is_order_received_page()) {
        return;
    }
    ?>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
    <script>
      confetti({ particleCount: 120, spread: 70, origin: { y: 0.6 },
                 disableForReducedMotion: true });
    </script>
    <?php
});

disableForReducedMotion: true 讓有開「減少動態效果」的使用者看不到紙花。我們在測試站下單，感謝頁跳出紙花；把瀏覽器切成減少動態效果再試，就沒有出現。這段是 PHP，放在 Code Snippets 這類外掛或子主題，放法見〈WooCommerce 結帳頁改成台灣習慣〉。

照顧不喜歡動畫的人

手機和電腦的系統設定裡，都有「減少動態效果」這個選項。有些人看到畫面一直動會頭暈、分心，就會把它打開。CSS 可以讀到這個設定，打開的人就不播動畫，直接顯示最後的樣子：

/* 有開「減少動態效果」的人，不播動畫 */
@media (prefers-reduced-motion: reduce) {
  .rise, .marker { animation: none; }
  .marker { background-size: 100% 100%; }
  .btn { transition: none; }
}

注意螢光筆那一行：關掉動畫之後，要直接給它畫好的樣子（100%），不然重點字就沒有螢光筆了。我們用 Chrome 模擬減少動態效果測過，標題直接出現、螢光筆直接是畫好的。

CSS 放在「外觀 → 自訂 → 附加的 CSS」，在區塊的「進階設定」填上 class 名稱（例如 rise、marker、btn）就能套用。

這些特效，留給作品集

火焰文字、故障風的扭曲、整頁亂飄的粒子、捲動時每一段都從不同方向飛進來，在設計師的作品集和實驗頁很好玩，放在要讓客人下單、報名的網站，多半是扣分的。捲動動畫還有一個風險：內容要等動畫觸發才出現，萬一 JavaScript 載入失敗，客人看到的就是一片空白。

每加一個動畫之前，問自己一句：它是在幫客人看懂、找到、完成什麼，還是只是好看？答得出來再加。

如果你想要一個動得剛剛好、每個效果都有目的的網站，可以先看〈IG 帳號不是你的資產〉想想網站要幫你做到什麼。MIMI 專做客製化網頁設計，版面、動畫和按鈕都依你的客人怎麼用來設計。MIMI 提供新北網頁設計服務，新北的店家、補習班可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。