css制作gif

CSS 制作 GIF 动画

CSS 本身无法直接生成 GIF 文件，但可以通过 CSS 动画模拟类似 GIF 的循环动画效果。以下是实现方法：

关键帧动画（@keyframes）

通过 @keyframes 定义动画序列，结合 animation 属性实现循环播放效果。例如，创建一个旋转的圆点：

.dot {
  width: 20px;
  height: 20px;
  background-color: #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

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

多帧动画

模拟 GIF 的逐帧动画效果，通过百分比定义每一帧的状态：

.box {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  animation: colorChange 3s infinite;
}

@keyframes colorChange {
  0% { background-color: #e74c3c; }
  50% { background-color: #2ecc71; }
  100% { background-color: #e74c3c; }
}

控制动画属性

• animation-iteration-count: infinite; 实现无限循环。
• animation-timing-function 调整动画速度曲线（如 ease-in-out）。
• animation-delay 设置动画延迟启动。

性能优化

• 优先使用 transform 和 opacity 属性，它们会触发 GPU 加速。
• 避免过多嵌套动画，减少重绘和回流。

局限性

• CSS 动画无法导出为 GIF 文件格式。
• 复杂动画可能需要结合 JavaScript 或 SVG 实现。

如果需要生成实际 GIF 文件，建议使用工具如 Photoshop、GIMP 或在线 GIF 生成器。CSS 动画更适合网页交互场景。