您的位置：首页 > 其它

使用canvas实现擦玻璃效果---转载

2016-04-12 15:08 337 查看

<!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="img/hovertreecity.jpg"></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 -->

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航