HTML5使用canvas實現下雨擦玻璃效果

DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 網頁特效代碼 >> 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>


關注微信公眾號何問起，賬號ihewenqi ，或者掃描下面二維碼關注。然後發送"橡皮擦"查看效果。

參考：使用CSS實現圖片磨砂玻璃效果

網頁特效代碼

新年快樂HTML5特效: 2016年馬上結束了，不管這一年經歷了什麼，付出和收獲了什麼，只能揮手和2016告別了。但願這一年的
利用jquery實現百度新聞導航菜單滑動動畫: 查看演示復制代碼前言前兩天，群裡有人問百度新聞導航是如何實現的，當時由於忙於工作，沒有來得及細看，
jQuery圖片列表鼠標經過遮罩顯示文字: 在線體驗效果：http://hovertree.com/texiao/jquery/2.htm以下是

DIV CSS 佈局教程網

相關文章