要制作动态图标,可以使用CSS的@keyframes规则来创建动画效果。下面是一个简单的示例代码,用CSS创建一个旋转动画效果的图标:

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

.icon {
width: 50px;
height: 50px;
background-color: red;
animation: spin 2s linear infinite;
}

在上面的代码中,我们首先使用@keyframes规则创建了一个名为"spin"的动画。动画从0%到100%经过了360度的旋转,使用transform属性实现旋转效果。

接着,我们创建了一个名为"icon"的类,设置了图标的宽高和背景颜色。最后,通过animation属性将动画应用于图标,并指定动画名称为"spin",持续时间为2秒,动画速度为线性,无限循环播放。

你可以将上述代码添加到你的HTML文件中,使用相应的元素应用"icon"类,即可看到一个旋转的动态图标。你可以根据自己的需求修改代码中的样式和动画效果。