CSS點擊色塊特效是一種非常流行的交互效果，可以讓頁面看起來更具活力。在這篇文章中，我們將學習如何使用CSS創建一個簡單的點擊色塊特效。

HTML代碼：
<div class="box">
<h2>點擊方塊以改變顏色</h2>
<div class="square"></div>
</div>
CSS代碼：
.box {
text-align: center;
padding: 50px 0;
}
.square {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: orange;
transition: background-color 0.5s ease;
}
.square:hover {
cursor: pointer;
background-color: blue;
}

首先，我們創建了一個包含標題和方塊的div容器。方塊的背景顏色為orange，使用transition屬性指定了顏色漸變效果，在點擊方塊時會有更加流暢的過渡效果。當我們將鼠標懸停在方塊上時，方塊的背景顏色會變成藍色。 我們還為方塊添加了一個cursor: pointer樣式，這將改變鼠標的形狀，指示用戶該元素可以被點擊。

現在，體驗一下吧！當你將鼠標懸停在方塊上時，會發現它會變成藍色。當你點擊方塊時，它會保持藍色，直到你再次點擊它，它才會變回橙色。CSS點擊色塊特效只需要很少的代碼即可實現，讓你的頁面看起來更有趣、更人性化。