在網頁設計中，動畫效果可以讓網頁更加生動有趣。CSS具有強大的樣式控制能力，也可以用來編寫各種動畫效果。下面我們就來介紹一種CSS點擊按鈕發生動畫的方法。

.btn {
padding: 10px 20px;
background-color: blue;
color: white;
border-radius: 5px;
}
.btn:hover {
background-color: red;
transition-duration: 0.5s;
}
.btn:active {
transform: scale(0.9);
transition-duration: 0.1s;
}

以上代碼是一個簡單的按鈕樣式，包含了三個部分：

• 普通狀態下的樣式：.btn，設置了按鈕的背景顏色、字體顏色、圓角等
• 鼠標滑過狀態下的樣式：.btn:hover，改變了按鈕的背景顏色，并設置了漸變過渡的動畫效果
• 鼠標點擊狀態下的樣式：.btn:active，用transform: scale縮小了按鈕的大小，并設置了縮放動畫效果

當用戶在網頁上點擊這個按鈕時，就會觸發:active狀態下的動畫效果，使得按鈕變得更加生動。通過這種簡單的CSS設置，我們可以輕松地實現各種按鈕動畫效果，讓網頁更加吸引人。