V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
fashioncj
V2EX  ›  问与答

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

  •  
  •   fashioncj · 2016-04-01 16:06:49 +08:00 · 4181 次点击
    这是一个创建于 3151 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    12 条回复    2016-04-02 06:17:49 +08:00
    jiaojing
        1
    jiaojing  
       2016-04-01 16:08:37 +08:00
    css
    Havee
        2
    Havee  
       2016-04-01 16:18:57 +08:00
    遮照层,只显示一个小框, js 让 png 横向滚动
    Havee
        3
    Havee  
       2016-04-01 16:20:42 +08:00
    gif 有一个不好,背景无法透明,所以越来越多的透明动态图,都用 png 滚动实现
    如果有简单的动画就直接 css 去画。
    chairuosen
        4
    chairuosen  
       2016-04-01 16:23:54 +08:00
    css 动画能加入 step ,也就是非线性移动
    b821025551b
        5
    b821025551b  
       2016-04-01 16:24:10 +08:00
    @Havee gif 在现代浏览器上可以透明,缺点是失真,有白边。
    learnshare
        6
    learnshare  
       2016-04-01 16:24:31 +08:00
    背景图:用 JS 周期性修改 background-position ;
    img :用 JS 周期性修改 position(left)。
    chairuosen
        7
    chairuosen  
       2016-04-01 16:25:11 +08:00
    @chairuosen 应该叫非连续
    Sivan
        8
    Sivan  
       2016-04-01 17:07:48 +08:00   ❤️ 1
    airyland
        9
    airyland  
       2016-04-01 20:58:16 +08:00   ❤️ 1
    Biwood
        10
    Biwood  
       2016-04-01 21:34:32 +08:00 via Android
    不需要 JS , CSS3 可以搞定
    yangg
        11
    yangg  
       2016-04-01 21:52:28 +08:00   ❤️ 1
    参照 @airyland 的方法写了你的两张图 http://codepen.io/yangg/pen/ZWXLPW?editors=1100
    第一张有点不知道每张要用多宽。
    audi
        12
    audi  
       2016-04-02 06:17:49 +08:00 via iPhone
    胶片都在这里了 是人都知道怎么实现
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2685 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 11:46 · PVG 19:46 · LAX 03:46 · JFK 06:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.