这种 PNG 图片前端如何实现动态图展示

[fashioncj]

本来想复制一下今天哔哩哔哩的 2233 的 gif ，没想到是 png 。。一直不知道如何使用。。求告知。

https://i.v2ex.co/E7wVeGBC.png

https://i.v2ex.co/ufYs928T.png

[jiaojing]

css

[Havee]

遮照层，只显示一个小框， js 让 png 横向滚动

[Havee]

gif 有一个不好，背景无法透明，所以越来越多的透明动态图，都用 png 滚动实现
如果有简单的动画就直接 css 去画。

[chairuosen]

css 动画能加入 step ，也就是非线性移动

[b821025551b]

@Havee gif 在现代浏览器上可以透明，缺点是失真，有白边。

[learnshare]

背景图：用 JS 周期性修改 background-position ；
img ：用 JS 周期性修改 position(left)。

[chairuosen]

@chairuosen 应该叫非连续

[Sivan]

http://codepen.io/sivan/pen/meBqYZ

[airyland]

https://jsfiddle.net/simurai/CGmCe/

[Biwood]

不需要 JS ， CSS3 可以搞定

[yangg]

参照 @airyland 的方法写了你的两张图 http://codepen.io/yangg/pen/ZWXLPW?editors=1100
第一张有点不知道每张要用多宽。

[audi]

胶片都在这里了 是人都知道怎么实现