无需登录 数据私有 本地保存

GIF分解精灵图导出 - 提取单帧和CSS定位

12
0
0
0
上传 GIF 文件

拖拽到此处，或点击选择文件

支持 .gif 格式，最大 50MB

正在解析 GIF 帧数据...

0 帧 0s 0×0 px 0 FPS 循环 ∞
精灵图尺寸：-- | 包含 0 帧
帧预览

点击帧可切换选中状态，未选中的帧不会出现在精灵图中

精灵图预览
动画效果预览

生成精灵图后自动预览

CSS 代码
// 请先上传GIF并生成精灵图
常见问题与知识点

精灵图是将多张图片（或动画帧）合并到一张大图中的技术。在前端开发中，精灵图可以减少HTTP请求数量，提升页面加载速度。对于帧动画，精灵图配合CSS的background-position和steps()函数可以高效实现逐帧动画效果，广泛应用于游戏开发、网页动效、加载动画等场景。

steps(N) 是CSS动画时间函数，它将动画过程分割为N个等距步骤，在每个步骤中画面保持静止。配合background-position的位移，可以让精灵图逐帧切换。例如：精灵图垂直排列了10帧，使用steps(10)，动画从background-position: 0 0到0 -1000px，浏览器会自动将位移分成10步，每步移动100px（即一帧的高度），从而实现流畅的逐帧动画。这种方式的优势是性能优异，完全由浏览器引擎处理。

垂直排列（推荐）：最适合CSS steps()动画，代码简洁，兼容性最好。只需改变background-position-y即可。适合大多数场景。
水平排列：同样适合steps动画，改变background-position-x。当帧宽度较小、帧数较多时水平排列可能产生过宽的图片。
网格排列：适合帧数非常多的情况，可以保持精灵图宽高比例合理。但CSS steps动画处理网格排列较复杂，通常需要JS配合或使用多个关键帧。建议优先使用垂直排列。

动画播放速度由CSS的animation-duration属性控制。原始GIF的总时长 = 各帧延迟之和。如果您希望保持原始速度，将动画持续时间设为GIF总时长，并配合steps(帧数)。如果想加速或减速，调整animation-duration即可。例如：原始GIF总时长2秒、共20帧，CSS设为animation: play 2s steps(20) infinite;可还原原始速度；改为1s则加速2倍，4s则减速为一半。

是的。本工具导出的精灵图为PNG格式，完整保留GIF中的透明通道（Alpha通道）。在精灵图预览中，棋盘格背景表示透明区域。下载的PNG文件可以放心用于任何背景之上，透明区域不会遮挡下方内容。如果您需要为透明区域填充背景色，可以在图像编辑软件中处理后使用。

帧采样（每N帧取1帧）：当GIF帧数较多时，可以使用采样减少精灵图中的帧数，从而减小文件大小。例如"每2帧取1帧"会将帧数减半，动画会稍微加快但更加轻量。
最大帧数：限制精灵图中包含的最大帧数，超出部分将被截断。这可以防止生成过大的精灵图导致页面加载缓慢。合理设置这两个参数可以在动画流畅度和文件大小之间取得平衡。

1. 更精细的控制：可以通过CSS控制播放速度、暂停、反向播放等，GIF无法做到。
2. 更小的文件体积：PNG精灵图通常比同质量GIF更小，尤其是帧数较多时。
3. 更好的渲染质量：GIF仅支持256色，而PNG支持真彩色+透明通道，画面质量更高。
4. 响应式适配：可以通过CSS transform缩放精灵图动画，而GIF缩放会失真。
5. 交互能力：可以通过hover、click等事件触发动画，GIF只能自动播放。

1. 将下载的PNG精灵图放入项目的图片目录。
2. 复制生成的CSS代码到您的样式文件中。
3. 在HTML中添加一个元素（如<div class="sprite-anim"></div>）。
4. 确保该元素的宽高与单帧尺寸一致。
5. 根据实际图片路径调整CSS中的url()路径。
精灵图动画在移动端和桌面端都有良好的浏览器兼容性（Chrome、Firefox、Safari、Edge均支持）。
🔧 相关工具