js切割图片切割，碎片化动画展示

今天上网学习前端小技巧，看到一个酷炫的功能，链接在此。怀着激动的心情，在本地测试了一下，发现效果还不错，兼容性：chrome最佳，firefox,360,ie9以上其次。

首先看页面效果，因为是截图的原因，所以页面效果不太好截图，真的很帅。

• chrome:

pic1.png

pic2.png

pic3.png

连贯的gif.gif

备注： gif图录制的不好，见谅~ 具体效果在文章底部下载本例子，查看效果。

页面上的文字，其实是一张透明的图片，后面的房子是大的背景。

pic4.png

• 火狐，360，ie9以上虽然不会像在谷歌下一样切割显示，但是也能渐变显示，效果也是可以的

pic5-1.png

pic5-2.png

• 页面最后生成的源码，我们会发现图片所在的div被切割成了多个小的div

pic6.png

• 最后看代码：

    
    
    


    

        点我
        

    

    
    

网页源代码文件：点击下载
参考文章：查看参考文章