CSS 圖標是網頁設計中必不可少的元素之一。在許多網站中，圖標是表達想法、概念和品牌標識的關鍵元素。為了使圖標更具吸引力，我們可以添加一些動態效果。下面，我們將介紹一些常用的 CSS 圖標動態效果。

.icon {
position: relative;
}
.icon:hover::before {
animation: myAnimation 1s ease-out;
}
@keyframes myAnimation {
0% {
transform: scale(1);
opacity: 0;
}
50% {
transform: scale(1.2);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}

上面的代碼是一個簡單的 CSS 圖標動畫效果。當鼠標懸停在圖標上時，它會顯示一個動畫效果。在這里，我們使用 ::before 偽元素來創建一個圖標的副本，并將動畫效果應用于它。我們使用 keyframes 關鍵字定義一個動畫，然后通過將它添加到 ::before 偽元素的樣式中來啟動它。

另一個常用的 CSS 圖標動態效果是使用 CSS3 轉換功能來實現圖標的旋轉。下面是一個具體的實例：

.rotate {
transform: rotate(0deg);
transition: transform 0.5s ease-out;
}
.rotate:hover {
transform: rotate(360deg);
}

在這里，我們定義了一個類名為 .rotate 的樣式，并使用 transform: rotate(0deg); 對它進行初始化。然后，我們使用 transition 屬性來設置旋轉動畫的時間和過渡效果。最后，我們添加了一個:hover 偽類，并將 transform 屬性設置為 rotate(360deg);。這樣，當鼠標懸停在圖標上時，它將順時針旋轉 360 度。

除此之外，我們還可以使用動畫庫，如 Animate.css 和 Hover.css 等，來實現更多的 CSS 圖標動態效果。這些庫包含了大量預定義的動畫效果，可以輕松實現圖標的運動、翻轉、搖晃、閃爍等多種效果。

在網頁設計中，動態效果可以使圖標更加生動活潑，讓網站內容更吸引人。通過使用 CSS 圖標動態效果，我們可以實現豐富多彩的交互效果，提高網站用戶體驗。