搜 索

SVG交互设计—GIF控制器

  • 1.4k阅读
  • 2020年07月28日
  • 0评论
首页 / SVG交互🎠 / 正文

实现原理

理论上是无法对一张GIF实现控制,但因为在微信图文当中,图片以及GIF只有出现在视域中才会开始加载,利用这个原理,可以先将GIF隐藏,通过点击一张图片(透明度变化)使GIF出现,随即开始加载播放。

<section style="background-image: url(触发前的图片链接);background-size:contain;background-repeat:no-repeat;">
    <svg opacity="0" style="background-image: url(触发后的GIF链接);background-repeat:no-repeat;display:block;background-size: 100%;" viewBox="0 0 * *">
        <animate attributeName="opacity" begin="click" to="1" dur="1ms" fill="freeze" calcMode="discrete"></animate>
    </svg>
</section>
SVG
打 赏
  • 支付宝
  • 微信
  • QQ
Alipay
WeChatPay
QQPay
评论区
暂无评论
avatar