用JS/CSS实现图片渐变式透明的动画效果

我想实现的动画效果是让图片从左到右以渐变式透明的效果显现。有点类似Photoshop里面通过透明度遮罩实现图片的“融入”(blend)效果,如果这个遮罩能从左到右动起来,那就是我想要的动画效果。

我大致研究了一下,即使是第一步静态的“融入”效果好像也很难用JS/CSS实现,目前我能想到的办法是把图片纵向切成多个小块,然后逐个控制它们的透明度。

还有一种办法是这个页面提示的,把图片放在canvas里面然后作像素级别的控制。我还没有开始试这种办法,但是看上去光是实现静态的融入效果就够麻烦的了,而且可能还有跨浏览器的问题。此外,如果在此基础上在进行canvas重绘以实现动画效果,我怀疑会很吃系统资源。

求教除此之外还有没有其他用JS/CSS实现此效果的方式?此外,我觉得这种动画效果应该不是非常古怪的那种,有没有什么现成的插件可以用呢?

回复
阅读 10.5k
3 个回答

background中配合使用 linear-gradient和图片,实现逐渐透明的效果

我想了一下 你可以额外写一个块元素,当你要开始效果的时候,就是这个块元素从左到右覆盖你的图片,并且控制块元素的透明度变化 效果有出入 不过你可以试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏