fashioncj
V2EX  ›  问与答

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

  •  
  •   fashioncj · Apr 1, 2016 · 5072 views
    This topic created in 3871 days ago, the information mentioned may be changed or developed.

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

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

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

    12 replies  •  2016-04-02 06:17:49 +08:00
    jiaojing
    jiaojing
    Apr 1, 2016
    1
    css
    Busy
    Busy
    Apr 1, 2016
    2
    遮照层,只显示一个小框, js 让 png 横向滚动
    Busy
    Busy
    Apr 1, 2016
    3
    gif 有一个不好,背景无法透明,所以越来越多的透明动态图,都用 png 滚动实现
    如果有简单的动画就直接 css 去画。
    chairuosen
    chairuosen
    Apr 1, 2016
    4
    css 动画能加入 step ,也就是非线性移动
    b821025551b
    b821025551b
    Apr 1, 2016
    5
    @Havee gif 在现代浏览器上可以透明,缺点是失真,有白边。
    learnshare
    learnshare
    Apr 1, 2016
    6
    背景图:用 JS 周期性修改 background-position ;
    img :用 JS 周期性修改 position(left)。
    chairuosen
    chairuosen
    Apr 1, 2016
    7
    @chairuosen 应该叫非连续
    Biwood
    Biwood
    Apr 1, 2016 via Android
    10
    不需要 JS , CSS3 可以搞定
    yangg
    yangg
    Apr 1, 2016❤️1
    11
    参照 @airyland 的方法写了你的两张图 http://codepen.io/yangg/pen/ZWXLPW?editors=1100
    第一张有点不知道每张要用多宽。
    audi
    audi
    Apr 2, 2016 via iPhone
    12
    胶片都在这里了 是人都知道怎么实现
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2073 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 02:35 · PVG 10:35 · LAX 18:35 · JFK 21:35
    ♥ Do have faith in what you're doing.