CSS點(diǎn)擊前后變色是一種常用的交互效果，可以通過CSS的偽類來實(shí)現(xiàn)，下面是一個(gè)簡(jiǎn)單的示例代碼，可以幫助你快速實(shí)現(xiàn)這個(gè)效果：

HTML代碼：

<div class="button">點(diǎn)擊我變色</div>

CSS代碼：

.button {
  color: #000; /* 初始顏色 */
  transition: color 0.3s; /* 過渡效果 */
}
.button:hover {
  color: #fff; /* 鼠標(biāo)懸停顏色 */
}
.button:active {
  color: #0f0; /* 點(diǎn)擊后顏色 */
}

在這個(gè)示例中，我們定義了一個(gè)名為.button的類，并設(shè)置了初始顏色、鼠標(biāo)懸停顏色和點(diǎn)擊后顏色，通過transition屬性，我們可以添加過渡效果，使得顏色變化更加平滑，需要注意的是，在實(shí)際應(yīng)用中，你可能需要根據(jù)具體需求調(diào)整這些顏色和過渡效果。

除了上述示例外，你還可以根據(jù)具體需求使用其他CSS偽類來實(shí)現(xiàn)點(diǎn)擊前后變色的效果，使用:focus偽類可以實(shí)現(xiàn)在元素獲得焦點(diǎn)時(shí)改變顏色，使用:visited偽類可以實(shí)現(xiàn)在元素被訪問后改變顏色等，這些偽類可以根據(jù)你的具體需求進(jìn)行組合使用，以達(dá)到更加豐富的交互效果。