4x4 CSS将JPG文件转换为GIF [关闭]答案

【问题标题】：4x4 CSS Converting JPG file to GIF [closed]4x4 CSS将JPG文件转换为GIF [关闭]
【发布时间】：2017-08-04 09:28:39
【问题描述】：

我怎样才能在一帧中收集上面的图像并做GIF？我可以使用 CSS 和 PHP 做到这一点吗？

我想将这些 4x4 图像显示为仅 1 帧的 gif。

【问题讨论】：

特别是gif，不是使用css，而是作为一次显示一个图像的动画，而不是jquery / css。如果所有合成图像的大小相同/部分位置相同，则它只是一个带有溢出隐藏的 div，并将边距设置为每个图像的偏移量。
你手里有示例代码吗？
我现在不能给你工作代码，但基本上是<div id='wrapper' style='width:150px;height:100px;overflow:hidden'><img src='..your image'></div> 然后是js $(function() { setTimeout(function() { $("#wrapper").css("margin-left", "-150px"); }, 2500); });（更改宽度/高度/边距以适应图像的较小部分）

标签： php jquery css

【解决方案1】：

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

.animation {
  width: 317px;
  height: 174px;
  background: url('https://i.stack.imgur.com/xo7T3.jpg') 0 0;
  animation: play 16s infinite;
}

@keyframes play {
0% { background-position: 0 0; }
5.99% { background-position: 0 0; }
6% { background-position: -317px 0; }
11.99% { background-position: -317px 0; }
12% { background-position: -634px 0; }
17.99% { background-position: -634px 0; }
18% { background-position: -951px 0; }
23.99% { background-position: -951px 0; }
24% { background-position: -1268px 0; }
99.99% { background-position: -1268px 0; }
100% { background-position: 0 0; }
}

&lt;div class="animation"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

这是我为您准备的工作表。在 javascript 上实现，使用 jQuery 库。

https://jsfiddle.net/271qnqrj/

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);

HTML：

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

CSS：

img.mygif { display: none; }

【讨论】：