V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
fashioncj
V2EX  ›  问与答

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

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