Php 4x4 CSS将JPG文件转换为GIF

如何在一帧内收集上述图像并执行GIF？我可以使用CSS和PHP来实现这一点吗

---

我想在1帧内以gif格式显示这些4x4图像。

这是第一行的动画。更改y轴将移动图像以显示第二行。PHP或Javascript不是必需的

。动画{
宽度：317px；
高度：174px；
背景：url（'https://i.stack.imgur.com/xo7T3.jpg') 0 0;
动画：播放16秒无限；
}
@关键帧播放{
0%{背景位置：0；}
5.99%{背景位置：0；}
6%{背景位置：-317px 0；}
11.99%{背景位置：-317px 0；}
12%{背景位置：-634px 0；}
17.99%{背景位置：-634px 0；}
18%{背景位置：-951px 0；}
23.99%{背景位置：-951px 0；}
24%{背景位置：-1268px 0；}
99.99%{背景位置：-1268px 0；}
100%{背景位置：0；}
}

---

这是我给你的一份工作反馈。 使用jQuery库在javascript上实现

JS:

(function($) {
    $.fn.extend({
        mygif: function(speed, width, height, verticalBorderWidth, horizontalBorderWidth) {
            speed = speed || 400;
            width = width || 315;
            height = height || 175;
            verticalBorderWidth = verticalBorderWidth || 5;
            horizontalBorderWidth = horizontalBorderWidth || 5;

            this.each(function() {
              var img = $(this).attr('src');
              var div = $('<div class="mygif" data-frame="1" style="width: ' + width + 'px;height:' + height + 'px;background-image: url(\'' + img + '\');"/>').insertAfter($(this));
              $(this).remove();
            });

            window.setInterval(function() {
              $('.mygif').each(function() {
                var frame = $(this).data('frame');
                if (frame == 16) {
                    frame = 1;
                } else {
                    frame++;
                }
                $(this).data('frame', frame);

                var posX = (width + verticalBorderWidth) * ((frame-1) % 4);
                var posY = (height + horizontalBorderWidth) * (Math.floor((frame-1)/4));
                $(this).css('background-position', -posX + 'px ' + -posY + 'px');
              });
            }, speed);
        }
    });

    $('.mygif').mygif()
})(jQuery);

<img src="https://i.stack.imgur.com/xo7T3.jpg" class="mygif" />

img.mygif { display: none; }

---

特别是作为一个

gif

，不是使用css，而是作为一个动画，一次显示一个图像，使用jquery/css并不困难。如果所有合成图像的大小相同/部分位置相同，那么它只是一个隐藏了溢出的div，并将边距设置为偏移到每个图像。您手头有示例代码吗？我现在不能给您工作代码，但本质上是

然后是js

$（function（）{setTimeout（function（）{$（“#wrapper”）.css（“左边距”，“-150px”）；}，2500）；}）；

（更改宽度/高度/边距以适合图像的较小部分）