您的位置:首页 - 教程 - 网页特效 - 正文
HTML5使用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实现图片磨砂玻璃效果

评论: