CSS 點擊愛心圖案的放射效果
這篇教學會使用 HTML 的 label 作為愛心按鈕，搭配相鄰兄弟選擇器偵測 checkbox 勾選狀態，實作點擊愛心按鈕時，出現放射狀態心的動態效果。
快速導覽：
點擊愛心變色效果
藉由類型為 checkbox 的 input 元素，搭配選擇器中的「虛擬類別選擇器」和「相鄰兄弟選擇器」，並進一步運用 label 的 for 屬性，就能實現勾選 checkbox 時讓 label 內容變色，下方範例除了會讓愛心圖案變色，還會搭配 animation 效果，實現點擊時放大縮小的效果。
<!-- 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 動畫，就能產生類似煙火爆炸的放射動畫效果，詳細說明可以查看下方範例註解。
<!-- 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>
小結
點擊出現放射狀愛心圖案的技術其實很簡單，困難的地方在於要如何分配放射愛心的位置以及動態效果的展現，同樣的技巧也可以用應在按讚、分享、或其他社群的小按鈕，替網站增添一些趣味的特色。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～