在網頁設計中，圖標的選用和展示非常重要。有時候我們需要讓圖標表達出不同的意義，那么如何制作一個能夠動態展示的圖標呢？這就需要用到CSS動畫的知識了。 首先，我們可以通過CSS的transform屬性來制作旋轉效果。例如，我們將一個圖標設置為旋轉360度，代碼如下：

.icon{
transform: rotate(360deg);
}

這個時候，圖標會無限制地按照自己的中心點旋轉，但是這樣的效果顯然不夠好看。因此，我們可以通過設置旋轉的中心點、旋轉的時間等來讓圖標更加動態。 接下來，我們可以使用CSS的@keyframes關鍵字來指定動畫的細節。可以選擇從0%到100%控制整個動畫，代碼如下：

@keyframes rotate{
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}

這里的rotate是我們為這個動畫自己定義的名稱，可以任意取名，但要保證唯一。其中，0%和100%代表動畫的開始和結束狀態。 最后，我們需要將這個@keyframes關鍵字引入到我們的樣式中，這樣圖標就會按照這個動畫循環旋轉。代碼如下：

.icon{
animation: rotate 3s linear infinite;
}

其中，animation是CSS3新增的一個屬性，它包含動畫的名稱、持續時間、速度曲線和是否循環等等信息。這里我們設置了動畫名稱為rotate，持續時間為3秒，速度曲線為線性，循環次數為無限。 由此可見，通過一些簡單的CSS代碼，我們就能讓一個普通的圖標變成一個組合了旋轉動畫的動態圖標了。如果想了解更多關于CSS動畫的知識，建議先從簡單的動畫入手，逐步提高難度，掌握了這些技能后，相信你的網頁設計將會變得更加生動有趣！