如何用 HTML 和 CSS 创建动画图标 (左下角)

要创建左下角的动画图标，你可以使用 HTML 和 CSS 代码。下面是一个示例代码：

HTML 代码：

<div class='icon-container'>
  <div class='icon'></div>
</div>

CSS 代码：

.icon-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  background-color: #f1f1f1;
  border-radius: 50%;
  z-index: 9999;
  overflow: hidden;
  animation: icon-rotate 2s linear infinite;
}
@keyframes icon-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.icon {
width: 40px;
height: 40px;
background-color: #333;
margin: 10px;
border-radius: 50%;
}

上述代码中，.icon-container 类用于创建一个包含动画图标的容器，它被设置为固定定位，并位于页面的左下角。具体的样式属性可以根据需要进行调整。

通过 @keyframes 规则，我们创建了一个名为 icon-rotate 的动画，使图标按照指定的角度进行旋转。在这个示例中，图标每 2 秒钟旋转一次。

.icon 类用于创建图标的样式，包括宽度、高度、背景颜色和边框圆角等属性。

你可以将上述 HTML 和 CSS 代码添加到你的网页中，然后就可以看到左下角的动画图标了。