为图像赋予移动效果

Question

我想对此给出一个动人的效果。 我应该添加动画屏幕还是有其他方式来实现这种效果？

Answer 1

你可以在jQuery中使用scale，可以在这里找到关于web动画的更好解释。

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个不同的图片，然后将这三个图片上传到一个免费的在线gif制作者。