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

Question

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

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

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

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

Answer 1

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

Answer 2

楼上说的对，可以在图片上面新建一个div层，这个层是渐变的，使用css3中的linear-gradient属性，这里有参考地址：http://www.w3cplus.com/content/css3-grad...

Answer 3

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