CSS是前端開(kāi)發(fā)必備的技能之一，其中樣式的變換和交互對(duì)于提升用戶體驗(yàn)具有重要作用。其中一種常見(jiàn)的效果是點(diǎn)擊背景變換，接下來(lái)就讓我們一起看看如何實(shí)現(xiàn)這個(gè)效果！

.btn {
background-color: blue;
color: white;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.btn:hover {
background-color: darkblue;
}
.btn:active {
background-color: red;
}

以上代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的按鈕，當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，背景顏色會(huì)從藍(lán)色漸變?yōu)樯钏{(lán)色。當(dāng)用戶點(diǎn)擊按鈕時(shí)，背景顏色會(huì)立即變?yōu)榧t色。

這是通過(guò):hover和:active偽類(lèi)實(shí)現(xiàn)的，:hover表示在鼠標(biāo)懸停在元素上時(shí)的樣式，:active表示在元素被活躍（例如鼠標(biāo)按下）時(shí)的樣式。同時(shí)，transition屬性指定了從原始狀態(tài)到:hover和:active狀態(tài)的變換過(guò)程。

這種點(diǎn)擊背景變換的效果可以應(yīng)用到多個(gè)地方，例如菜單欄、按鈕、鏈接等，為網(wǎng)頁(yè)帶來(lái)更加動(dòng)態(tài)的效果和交互體驗(yàn)。