会动的图标在网页中越来越常见，它可以提升网页的交互性和趣味性。而这些动态效果通常是通过CSS实现的。下面我们来看一下如何使用CSS制作会动的图标。

首先，我们需要一个图标。可以选择使用字体图标或者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>

这样就完成了一个简单的会动的图标制作。当然，我们可以根据需要，添加更多的动画效果和图标样式，使得效果更加丰富。