点击爱心图案放射效果

这篇教学会使用 HTML 的 label 作为爱心按钮，搭配相邻兄弟选择器侦测 checkbox 勾选状态，实作点击爱心按钮时，出现放射状态心的动态效果。

快速导览：

• 点击爱心变色效果
• 点击爱心图案的放射效果

点击爱心变色效果

借由类型为 checkbox 的 input 元素，搭配选择器中的“虚拟类别选择器”和“相邻兄弟选择器”，并进一步运用 label 的 for 属性，就能实现勾选 checkbox 时让 label 内容变色，下方范例除了会让爱心图案变色，还会搭配 animation 效果，实现点击时放大缩小的效果。

参考：相邻兄弟选择器、虚拟类别选择器 ( 表单输入 )、CSS 动画 animation

线上展示：https://codepen.io/oxxo/pen/LEYoBbG

<!-- 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 程式碼 -->
<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>

小结

点击出现放射状爱心图案的技术其实很简单，困难的地方在于要如何分配放射爱心的位置以及动态效果的展现，同样的技巧也可以用应在按赞、分享、或其他社群的小按钮，替网站增添一些趣味的特色。

意见反馈