你的位置:首页 > 网页设计

[网页设计]使用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实现图片磨砂玻璃效果

转自:http://hovertree.com/h/bjaf/m6ycwicd.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html