CSS過渡效果圖是網(wǎng)頁設(shè)計中常用的動態(tài)效果之一，它能夠讓網(wǎng)頁元素在改變樣式時，過渡出現(xiàn)而不是突然出現(xiàn)，給用戶帶來更好的視覺體驗(yàn)。下面是一個使用CSS過渡效果的例子：

.btn{
background-color: blue;
color: white;
padding: 10px 20px;
transition: background-color 0.5s ease;
}
.btn:hover{
cursor: pointer;
background-color: green;
}

上述代碼中，我們定義了一個帶有背景顏色和文字顏色的按鈕，在按鈕的CSS樣式中，我們使用了transition屬性來定義背景色的過渡動畫，其中0.5s是過渡時間，ease是動畫效果。當(dāng)鼠標(biāo)懸停在按鈕上時，我們通過:hover來定義新的CSS樣式，將背景色改為綠色。

除了使用hover，我們也可以使用JavaScript來觸發(fā)CSS過渡效果，下面是一個例子：

.btn{
background-color: blue;
color: white;
padding: 10px 20px;
transition: background-color 0.5s ease;
}
.btn.active{
cursor: pointer;
background-color: green;
}

上述代碼中，我們定義了一個按鈕的CSS樣式，并在按鈕添加了.active類，當(dāng)該類被添加時，按鈕的背景色將會過渡到綠色。下面是JavaScript代碼：

var btn = document.querySelector('.btn');
btn.addEventListener('click', function(){
btn.classList.add('active');
});

通過以上代碼，我們?yōu)榘粹o添加了一個點(diǎn)擊事件，當(dāng)按鈕被點(diǎn)擊時，會添加.active類，從而觸發(fā)CSS過渡效果。通過這個例子可以看出，JavaScript和CSS過渡效果能夠方便地結(jié)合起來，實(shí)現(xiàn)更加豐富的動態(tài)效果。