Дайте движущуюся эффект к изображению

Question

Я хочу дать движущуюся эффект к этому. Должен ли я добавить анимированный экран или есть какой-то другой способ дать такой эффект?

Answer 1

Вы можете использовать масштаб в jQuery, лучшее объяснение в веб-анимации можно найти здесь.

http://danielcwilson.com/blog/2015/07/animations-part-1/

--- Вот пример:

Ваш HTML может быть что-то простое, как,

<div id="flying"><img src="/spaceship.png"></div> 

, а затем, возможно, использовать,

var player = document.getElementById('flying').animate([ 
     { transform: 'scale(4)', opacity: 1, offset: 0 }, 
     { transform: 'scale(1)', opacity: .5, offset: .3 }, 
     { transform: 'scale(.3)', opacity: .667, offset: .7875 }, 
     { transform: 'scale(.2)', opacity: .6, offset: 1 } 
     ], { 
     duration: 700, //milliseconds 
     easing: 'ease-in-out', //'linear', a bezier curve, etc. 
     delay: 10, //milliseconds 
     iterations: Infinity, //or a number 
     direction: 'reverse', //'normal', 'reverse', etc. 
     fill: 'forwards' //'backwards', 'both', 'none', 'auto' 
     }); 

Answer 2

Я создал следующим путем редактирования вашего изображения, чтобы создать 3 разных изображения, а затем uploa чтобы эти три были бесплатными онлайн-разработчиками gif.