Home >Web Front-end >HTML Tutorial >html implements rain effect on pictures_html/css_WEB-ITnose
html implements rain effect on pictures_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:53:192600browse
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <style media="screen"> 6 body { 7 overflow: hidden; 8 height: 100%; 9 margin: 0;10 padding: 0;11 }12 13 img {14 width: 100%;15 height: 100%;16 }17 </style>18 <script src="http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js" type="text/javascript"></script>19 <script type="text/javascript">20 function run() {21 var image = document.getElementById('background');22 image.onload = function() {23 var engine = new RainyDay({24 image : this,25 });26 engine.rain([ [ 1, 2, 8000 ] ]);27 engine.rain([ [ 3, 3, 0.88 ], [ 5, 5, 0.9 ], [ 6, 2, 1 ] ], 100);28 }29 image.crossOrigin = 'anonymous';30 image.src = 'http://i.imgur.com/N7ETzFO.jpg';31 }32 </script>33 <title>哇塞！</title>34 </head>35 <body onLoad="run();">36 <img id="background" alt="background" src="" />37 </body>38 </html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：High-end dynamic CSS_html/css_WEB-ITnoseNext article：High-end dynamic CSS_html/css_WEB-ITnose