如果這都不算愛，我又什麼好悲哀，謝謝你的慷慨，是我自己活該，OH～NO～ 你喜歡那一版？張學友版本還是伍佰版本？我自己最喜歡純 CSS 的版本，就是那個用純 CSS 做出點擊愛心然後冒泡泡的效果，證明這一切都是愛！( 下圖使用 Google AI Studio 的 Nano Banana 合成 )

正文開始

這篇教學會使用 HTML 的 label 作為愛心按鈕，搭配相鄰兄弟選擇器偵測 checkbox 勾選狀態，實作點擊愛心按鈕時，出現放射狀態心的動態效果。

點擊愛心變色效果

藉由類型為 checkbox 的 input 元素，搭配選擇器中的「虛擬類別選擇器」和「相鄰兄弟選擇器」，並進一步運用 label 的 for 屬性，就能實現勾選 checkbox 時讓 label 內容變色，下方範例除了會讓愛心圖案變色，還會搭配 animation 效果，實現點擊時放大縮小的效果。

• 參考：相鄰兄弟選擇器、虛擬類別選擇器 ( 表單輸入 )、CSS 動畫 animation
• 線上展示：https://codepen.io/oxxo/pen/LEYoBbG

html >>>>
<!-- HTML 程式碼 -->
<input type="checkbox" id="oxxo">
<label for="oxxo" class="icon">♥</label>

<!-- CSS 程式碼 -->
<style>
  :root {font-size: 20px;}  /* 在 :root 設定字體，方便後續使用 rem 單位 */
  input{display: none;}     /* 隱藏 input 元素 */
  .icon {
    position: relative;
    display: block;         /* 將 label 改成 block 區塊容器 */
    margin: 100px;
    width: 100px;
    height: 100px;
    line-height: 100px;     /* 行高和高度相同，讓內容垂直置中 */
    text-align: center;     /* 水平置中 */
    font-size: 100px;
    font-family: monospace;
    cursor: pointer;        /* 手型游標 */
    user-select: none;      /* 避免連續點擊時選取內容 */
    color: #ccc;
  }
  input:checked + .icon {
    animation: a .3s forwards;   /* 套用放大縮小動畫，讓動畫停留在最後一格 */
  }
  @keyframes a {
    0% {font-size: 100px;}
    50% {font-size: 30px;}
    100% {
      font-size: 100px;
      color: red;
    }
  }
</style>

點擊愛心圖案的放射效果

如果要做到有許多放射愛心圖案的效果，則可以運用「虛擬元素」和 text-shadow，產生「多重文字陰影」，配合 CSS 動畫，就能產生類似煙火爆炸的放射動畫效果，詳細說明可以查看下方範例註解。

• 參考：text-shadow 文字陰影、虛擬元素選擇器 ( 偽元素 )
• 線上展示：https://codepen.io/oxxo/pen/vEYwayg

html >>>>
<!-- HTML 程式碼 -->
<input type="checkbox" id="oxxo">
<label for="oxxo" shadow="♥" class="icon">♥</label>

<!-- CSS 程式碼 -->
<style>
  :root {font-size: 20px;}  /* 在 :root 設定字體，方便後續使用 rem 單位 */
  input{display: none;}     /* 隱藏 input 元素 */
  .icon {
    position: relative;
    display: block;         /* 將 label 改成 block 區塊容器 */
    margin: 100px;
    width: 100px;
    height: 100px;
    line-height: 100px;     /* 行高和高度相同，讓內容垂直置中 */
    text-align: center;     /* 水平置中 */
    font-size: 100px;
    font-family: monospace;
    cursor: pointer;        /* 手型游標 */
    user-select: none;      /* 避免連續點擊時選取內容 */
    color: #ccc;
  }
  input:checked + .icon {
    animation: a .3s forwards;   /* 套用放大縮小動畫，讓動畫停留在最後一格 */
  }
  @keyframes a {
    0% {font-size: 100px;}
    50% {font-size: 30px;}
    100% {
      font-size: 100px;
      color: red;
    }
  }
  input:checked + .icon::after {
    animation: oxxo3 .5s .15s forwards;  /* 圓形放射漸層動畫，延遲 0.15s 再播放 */
  }
  .icon::after {
    position: absolute;
    content: "";
    display: block;
    z-index: 2;          /* 改在元素上方 */
    top: 0;
    left: 0;
    width: 100%;         /* 尺寸大小和父元素相同 */
    height: 100%;
    border-radius: 50%;  /* 圓角使其變成圓形 */
    background: radial-gradient(#fff0 30%,#f69);  /* 圓形放射漸層 */
    scale: 0;            /* 使用尺寸變形，尺寸為 0 */
  }
  /* 動畫效果 */
  @keyframes oxxo3 {
    0% {
      opacity: 0;
      scale: 0;
    }
    50% {
      opacity: 1;
      font-size: 20px;
    }
    100% {
      opacity: 0;
      scale: 1.3;
    }
  }
  input:checked + .icon::before {
    animation: oxxo1 .5s .3s  forwards,
      oxxo2 .5s .6s forwards;    /* 放射動畫，延遲 0.3s 和 0.6s 再播放 */
  }
  .icon::before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: calc(50% - 5px);  /* 根據文字尺寸計算位置 */
    line-height: 100px;
    color: #0000;
    content: attr(shadow);  /* 讀取元素屬性 */
    font-size: 10px;
  }
  /* 動畫控制陰影，總共有十八個點在十八個位置 */
  @keyframes oxxo1 {
    100% {
      text-shadow: 
        #f00 4.00rem 0.00rem,
        #f90 3.57rem 1.23rem,
        #0c0 3.06rem 2.57rem,
        #08f 2.10rem 3.64rem,
        #f0f 0.69rem 3.94rem,
        #f9f -1.94rem 3.09rem,
        #f99 -0.75rem 3.78rem,
        #0cc -3.23rem 2.70rem,
        #66f -3.76rem 1.37rem,
        #f00 -3.80rem 0.00rem,
        #f90 -3.06rem -2.57rem,
        #0c0 -2.10rem -3.64rem,
        #08f 0.65rem -3.89rem,
        #f0f -0.66rem -3.76rem,
        #f9f 3.50rem -1.21rem,
        #f99 2.10rem -3.64rem,
        #0cc 3.06rem -2.57rem,
        #66f -3.75rem -1.23rem;
    }
  }
  @keyframes oxxo2 {
    100% {font-size: 0;}
  }
</style>

小結

點擊出現放射狀愛心圖案的技術其實很簡單，困難的地方在於要如何分配放射愛心的位置以及動態效果的展現，同樣的技巧也可以用應在按讚、分享、或其他社群的小按鈕，替網站增添一些趣味的特色。

• 原文參考：CSS 點擊愛心圖案的放射效果
• 延伸閱讀：CSS 教學大全