CSS按下變顏色

在網頁設計中，我們經常需要一些交互效果來增強用戶體驗。其中之一就是當用戶點擊某個元素時，讓它的顏色發生改變。下面我們來學習一下如何使用CSS來實現這個效果。

首先，在HTML中需要為需要變色的元素添加一個類名，例如：

<div class="color-change">這是需要變色的元素</div>

接下來，使用CSS來定義這個類名的樣式，例如：

.color-change{
color: #333;
transition: all .3s;
}
.color-change:active{
color: #ff0000;
}

在上面的代碼中，我們為.color-change類名定義了一個初始樣式，可以改變元素的文本顏色。其中transition屬性用于定義元素變化的過渡效果。當用戶點擊元素時，.color-change:active偽類會生效，將文本顏色改變為紅色。

需要注意的是，為了提升用戶體驗，建議在實現這種效果時使用可點擊的元素，例如、等。同時，建議在樣式表中對元素狀態（hover、active等）的改變進行統一的定義，方便樣式的管理。