Question

如何在一帧中收集上述图像并进行GIF？我可以使用CSS和PHP吗？

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

Answer 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; }
}

<div class="animation"></div>

Answer 2

这是我的工作饲料。使用jQuery库在javascript上实现。

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

4x4 CSS将JPG文件转换为GIF

2 个答案: