: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;}
}