生活随笔
收集整理的這篇文章主要介紹了
使用canvas实现擦玻璃效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
體驗(yàn)效果: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擦玻璃效果 - 何問(wèn)起
</title>
<base target="_blank" />
</head>
<body style="margin: 0; padding: 0;"> <!-- 圖片需用本地圖片 ，網(wǎng)絡(luò)圖片無(wú)效 -->
<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 />掃描二維碼在手機(jī)查看。
<a href="http://hovertree.com/">首頁(yè)
</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 --> 關(guān)注微信公眾號(hào) 何問(wèn)起 ，賬號(hào)ihewenqi ，或者微信掃描下面二維碼關(guān)注。然后發(fā)送"橡皮擦"查看效果。
參考：使用CSS實(shí)現(xiàn)圖片磨砂玻璃效果
轉(zhuǎn)自：http://hovertree.com/h/bjaf/m6ycwicd.htm
更多特效：http://www.cnblogs.com/roucheng/p/texiao.html
轉(zhuǎn)載于:https://www.cnblogs.com/roucheng/p/canvasglass.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)
總結(jié)
以上是生活随笔為你收集整理的使用canvas实现擦玻璃效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
