4x4 CSS將JPG文件轉換爲GIF

Question

如何在一幀內收集上述圖像並做GIF？我可以使用CSS和PHP來做到這一點嗎？

我想說明這些4x4的圖像作爲在短短的1幀的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

這是給你一個工作feedle由我。 在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; }