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

2016 年 4 月 1 日
 fashioncj

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

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

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

4960 次点击
所在节点    问与答
12 条回复
jiaojing
2016 年 4 月 1 日
css
Busy
2016 年 4 月 1 日
遮照层，只显示一个小框， js 让 png 横向滚动
Busy
2016 年 4 月 1 日
gif 有一个不好，背景无法透明，所以越来越多的透明动态图，都用 png 滚动实现
如果有简单的动画就直接 css 去画。
chairuosen
2016 年 4 月 1 日
css 动画能加入 step ，也就是非线性移动
b821025551b
2016 年 4 月 1 日
@Havee gif 在现代浏览器上可以透明，缺点是失真，有白边。
learnshare
2016 年 4 月 1 日
背景图：用 JS 周期性修改 background-position ；
img ：用 JS 周期性修改 position(left)。
chairuosen
2016 年 4 月 1 日
@chairuosen 应该叫非连续
Sivan
2016 年 4 月 1 日
http://codepen.io/sivan/pen/meBqYZ
airyland
2016 年 4 月 1 日
https://jsfiddle.net/simurai/CGmCe/
Biwood
2016 年 4 月 1 日
不需要 JS ， CSS3 可以搞定
yangg
2016 年 4 月 1 日
参照 @airyland 的方法写了你的两张图 http://codepen.io/yangg/pen/ZWXLPW?editors=1100
第一张有点不知道每张要用多宽。
audi
2016 年 4 月 2 日
胶片都在这里了 是人都知道怎么实现

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/267941

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX