今天我想和大家分享一個提高網頁交互體驗的小技巧，就是在HTML中添加點擊時的過渡動畫效果。下面我們來看一下如何實現。 首先，我們需要在CSS中定義一個樣式，命名為"button-hover"，這個樣式將會作為鼠標懸浮在按鈕上時的過渡效果。

.button-hover {
transition: all .2s ease-in-out;
}

接下來，我們需要添加一個具有button-hover樣式的元素，這個元素將會是我們需要添加點擊效果的對象。以下是一個例子：

點擊我

現在我們需要為這個元素添加一個點擊事件監(jiān)聽器。在JavaScript中，我們可以使用addEventListener()函數來完成這個任務。

document.querySelector('.button-hover').addEventListener('click', function() {
this.classList.toggle('button-clicked');
});

在這里，我們?yōu)樵靥砑恿艘粋€點擊事件監(jiān)聽器，并且在點擊時為這個元素添加或刪除一個叫做"button-clicked"的類名。 最后，我們需要在CSS中定義這個"button-clicked"類名的樣式：

.button-clicked {
transform: scale(0.95);
}

這個樣式將會在點擊時改變按鈕的大小，來模擬點擊效果。 現在，我們已經成功地添加了一個點擊時的過渡動畫效果。這個小技巧可以在很多場景下使用，比如在按鈕、下拉菜單、滑動面板等等。希望通過這篇文章的介紹能夠幫助大家提高網頁交互體驗。