會動的圖標在網頁中越來越常見，它可以提升網頁的交互性和趣味性。而這些動態效果通常是通過CSS實現的。下面我們來看一下如何使用CSS制作會動的圖標。

首先，我們需要一個圖標?？梢赃x擇使用字體圖標或者SVG圖標。在這里，我們使用字體圖標作為例子。具體來說，我們使用了Font Awesome字體庫，其中包含了很多常用圖標。在HTML中引入字體庫：

然后，在CSS中設置我們要使用的圖標樣式，并添加動畫效果。下面的代碼設置了一個箭頭圖標，并且添加了一個從上向下的動畫效果：

.icon {
font-family: 'Font Awesome';
font-size: 24px;
content: '\f062'; /* Font Awesome 箭頭圖標 */
animation: slideDown 1s ease-out infinite alternate;
}
@keyframes slideDown {
from {
transform: translateY(-10px);
}
to {
transform: translateY(0);
}
}

在上面的代碼中，我們首先定義了一個類名為“icon”的元素，并設置其字體樣式和圖標內容。然后，在“icon”類內部，我們定義了一個名為“slideDown”的keyframes動畫，并在圖標屬性中應用它。

最后，我們在HTML中使用這個“icon”類來顯示圖標：

<i class="icon"></i>

這樣就完成了一個簡單的會動的圖標制作。當然，我們可以根據需要，添加更多的動畫效果和圖標樣式，使得效果更加豐富。