可以利用 CSS @keyframes 和 background-image 配合 Base64 数据 URI，实现多张内联图像的无缝轮播动画，无需外部文件或 JavaScript。
可以利用 css `@keyframes` 和 `background-image` 配合 base64 数据 uri，实现多张内联图像的无缝轮播动画，无需外部文件或 javascript。
在 HTML 中直接嵌入 Base64 图像（如 <img src="data:image/png;base64,..." alt="如何在 HTML 中使用 CSS 动画循环播放多个 Base64 编码图像" >）虽能快速显示单图，但原生 <img alt="如何在 HTML 中使用 CSS 动画循环播放多个 Base64 编码图像" > 标签不支持帧序列动画——它无法在不借助脚本的情况下切换 src 属性实现定时轮播。真正的轻量级、声明式解决方案是：将 Base64 图像作为背景图，通过 CSS 动画控制 background-image 的阶段性切换。
✅ 正确实现方式（纯 CSS）
首先，确保 HTML 中有一个容器元素（推荐使用 <div> 而非 <code><img alt="如何在 HTML 中使用 CSS 动画循环播放多个 Base64 编码图像" >，因其更适配背景图控制；若坚持用 <img alt="如何在 HTML 中使用 CSS 动画循环播放多个 Base64 编码图像" >，需设 display: block 并禁用默认图片渲染）：
<!DOCTYPE html>
<html>
<head>
<style>
.base64-animated {
width: 200px;
height: 200px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
/* 启用 CSS 动画 */
animation-name: base64Loop;
animation-duration: 0.3s; /* 总时长 = 单帧时长 × 帧数 → 0.1s × 3 = 0.3s */
animation-iteration-count: infinite;
animation-timing-function: steps(1, end); /* 关键：强制逐帧切换，避免过渡渐变 */
}
@keyframes base64Loop {
0% { background-image: url('data:image/png;base64,iVBORw0KGgo...'); }
33.33% { background-image: url('data:image/webp;base64,UklGRnAeAABXRU...'); }
66.66% { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhE...'); }
100% { background-image: url('data:image/png;base64,iVBORw0KGgo...'); } /* 回到首帧，形成闭环 */
}
</style>
</head>
<body>
<div class="base64-animated"></div>
</body>
</html>⚠️ 重要注意事项
-
steps(1, end)不可省略：默认animation-timing-function: ease会导致背景图在关键帧间平滑过渡（视觉模糊或混合），而steps(1, end)强制动画在每一帧结束时“跳变”，实现精准帧控。 -
Base64 字符串需完整且格式正确：确保每段 Base64 字符串前缀匹配实际图像类型（如
data:image/png;base64,、data:image/webp;base64,），多余空格或换行会破坏解析。 - 性能与体积权衡：Base64 编码会使图像体积增大约 33%，三张中等尺寸图可能显著增加 HTML 体积；建议仅用于小图标、加载指示器等轻量场景。
- 兼容性：CSS 动画和 Data URI 在所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 12）中均受支持，无需 Polyfill。
✅ 替代方案（JavaScript 精确控制）
若需动态控制帧时长、暂停/播放或响应用户交互，可结合 JS 切换 src：
const img = document.querySelector('img');
const frames = [
'data:image/png;base64,iVBORw0KGgo...',
'data:image/webp;base64,UklGRnAeAABXRU...',
'data:image/png;base64,iVBORw0KGgoAAAANSUhE...'
];
let index = 0;
setInterval(() => {
img.src = frames[index];
index = (index + 1) % frames.length;
}, 100); // 每 100ms 切换一帧但该方案会触发多次资源重载，不如 CSS 方案高效。
立即学习“前端免费学习笔记（深入）”；
综上，纯 CSS + background-image + @keyframes 是实现 Base64 图像动画最简洁、高性能且语义清晰的方式——它将动画逻辑完全交由渲染引擎处理，零 JS 依赖，完美契合现代前端“声明式”开发理念。
