4x4 CSS Konvertieren JPG-Datei in GIF

Question

Wie kann ich die oben genannten Bilder in nur einem Rahmen sammeln und GIF tun? Kann ich das mit CSS und PHP machen?

Ich möchte nur 1 Frame diese 4x4 Bilder als gif zeigen.

Answer 1

Hier ist eine Animation der ersten Zeile. Wenn Sie die Y-Achse ändern, wird das Bild so verschoben, dass die zweite Zeile angezeigt wird. PHP oder Javascript ist nicht erforderlich.

.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

ist hier ein Arbeits feedle für Sie von mir. Implementiert in javascript mithilfe der jQuery-Bibliothek.

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