使用canvas实现擦玻璃效果
体验效果:http://hovertree.com/texiao/html5/25/
效果图：
代码如下：
<!DOCTYPE html> <html> <head lang="zh"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" /> <meta charset="UTF-8"> <title>HTML5擦玻璃效果 - 何问起</title> <base target="_blank" /> </head> <body style="margin: 0; padding: 0;"> <!-- 图片需用本地图片 ，网络图片无效 --> <div id="box" style="width: 100%; min-height:480px;" data-image-src="hovertreecity.jpg"></div> <div class="hwqewm"><img src="http://hovertree.com/texiao/html5/25/cbl.png" /><br />扫描二维码在手机查看。<a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/m6ycwicd.htm">原文</a></div> </body> </html> <style> .clean-window-out { position: relative; padding: 0; } .clean-window-out .window-image, .clean-window-out .window-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .clean-window-out .window-canvas { z-index: 2; } a { color: white; } .hwqewm { width: 200px; height: 176px; position: fixed; z-index: 99999; bottom: 0px; left: 0px; right: 0px; margin: 0px auto; color: white; } </style> <script src="http://hovertree.com/texiao/html5/25/hovertreegrass.js"></script> <!-- Greate by HoverTree (Sun Mar 27 02:45:46 CST 2016) 43ms -->
关注微信公众号 何问起 ，账号ihewenqi ，或者微信扫描下面二维码关注。然后发送"橡皮擦"查看效果。
参考：使用CSS实现图片磨砂玻璃效果
