CSS背景色改變動(dòng)畫是網(wǎng)頁(yè)設(shè)計(jì)中常用的動(dòng)畫效果之一。當(dāng)鼠標(biāo)移動(dòng)到按鈕上或者點(diǎn)擊按鈕時(shí)，背景色發(fā)生變化，讓頁(yè)面更加生動(dòng)。

.btn{
background-color: #ccc; //按鈕默認(rèn)背景色為灰色
transition: background-color .3s ease-in-out; //設(shè)置背景色變化為0.3s緩慢啟動(dòng)
}
.btn:hover{
background-color: #f00; //鼠標(biāo)懸浮時(shí)背景色變?yōu)榧t色
}
.btn:active{
background-color: #00f; //按鈕按下時(shí)背景色變?yōu)樗{(lán)色
}

在上面的代碼中，我們定義了一個(gè).btn類，設(shè)置了按鈕的默認(rèn)背景色為灰色，并且使用transition屬性添加了過(guò)渡效果。當(dāng)鼠標(biāo)懸浮在按鈕上時(shí)，我們使用:hover偽類選擇器來(lái)設(shè)定背景色變?yōu)榧t色。而當(dāng)按鈕被按下時(shí)，我們使用:active偽類選擇器來(lái)設(shè)定背景色變?yōu)樗{(lán)色。

除了用偽類選擇器，我們還可以使用JavaScript來(lái)實(shí)現(xiàn)CSS背景色改變動(dòng)畫。例如，我們可以在點(diǎn)擊按鈕時(shí)用JavaScript代碼動(dòng)態(tài)更改CSS樣式屬性來(lái)實(shí)現(xiàn)按鈕背景色的動(dòng)畫效果。

var btn = document.querySelector('.btn');
btn.addEventListener('click', function(){
this.style.backgroundColor = '#f00'; //點(diǎn)擊按鈕時(shí)背景色變?yōu)榧t色
setTimeout(function(){
btn.style.backgroundColor = '#ccc'; //0.5s后回到默認(rèn)背景色
}, 500);
})

以上是一種使用JavaScript實(shí)現(xiàn)CSS背景色變化動(dòng)畫的方法。在點(diǎn)擊按鈕時(shí)，我們使用JavaScript修改按鈕的背景色為紅色，并在0.5秒后使用setTimeout函數(shù)將背景色還原為默認(rèn)顏色。

總之，CSS背景色變化動(dòng)畫是網(wǎng)頁(yè)設(shè)計(jì)中的重要元素之一，既可以使用CSS的偽類選擇器來(lái)實(shí)現(xiàn)，也可以使用JavaScript腳本來(lái)實(shí)現(xiàn)。無(wú)論采用哪種方法，都能為網(wǎng)頁(yè)帶來(lái)更出色的用戶體驗(yàn)。