在網頁設計過程中，常常需要使用CSS來為網頁添加一些動態效果，比如說鼠標經過圖片時圖片會變亮、點擊按鈕時背景顏色會變化等等。下面就為大家介紹如何使用CSS把靜態的元素變成動態的。

在CSS中，我們可以使用transition來實現動態效果。transition是CSS3中新增的一個屬性，通過它我們可以指定元素的某些屬性（如顏色、大小、透明度等等）在一段時間內平滑地改變，從而實現動態效果。

下面是一個例子，當我們鼠標經過這個盒子時，盒子的背景顏色會從淡灰色漸變為粉紅色：

.box {
width: 100px;
height: 100px;
background-color: #ccc;
transition: background-color 0.5s;
}
.box:hover {
background-color: pink;
}

在上面的代碼中，我們先定義了一個名為.box的樣式，設置了它的寬度、高度和背景顏色，并在其上使用了transition屬性來指定背景顏色在0.5秒內發生變化。然后，當我們鼠標經過這個盒子時，就會觸發它的:hover偽類，改變盒子的背景顏色為粉紅色。

除了使用transition屬性之外，我們還可以使用CSS中的animation屬性來實現更復雜的動態效果。animation屬性可以讓元素在一段時間內執行一系列的動畫，比如說旋轉、縮放、淡入淡出等等。下面是一個簡單的例子，當我們點擊這個按鈕時，就會讓一個圖標旋轉：

.icon {
width: 50px;
height: 50px;
background-image: url("icon.png");
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

在上面的代碼中，我們先定義了一個名為.icon的樣式，設置了它的寬度、高度和背景圖片，并使用animation屬性來調用一個名為rotate的動畫。然后，我們在@keyframes中定義了這個動畫的執行過程，從0度開始旋轉，一直旋轉到360度。最后，我們再把這個.icon放在一個按鈕上，當點擊這個按鈕時，就會執行這個動畫。