여기서 우리는 주로 Rainyday JS 라이브러리를 사용합니다.이 라이브러리는 매우 간단하고 사용하기 편리합니다. 따라서 말도 안되는 말을 많이하지 않고 데모 코드를 읽습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd html 4.01 Transitional // en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<스타일 미디어 = "화면">
몸 {
오버플로 : 숨겨진;
높이 : 100%;
여백 : 0;
패딩 : 0;
}
img {
너비 : 100%;
높이 : 100%;
}
</스타일>
<script src = "http://maroslaw.github.io/rainyday.js/dist/rainyyday.0.2.min.js"type = "text/javascript"> </script>
<script type = "text/javaScript">
함수 run () {
var image = document.getElementById ( 'background');
image.onload = function () {
var 엔진 = 새로운 비오는 날 ({{
이미지 : 이것은
});
Engine.Rain ([[1, 2, 8000]]);
Engine.Rain ([[3, 3, 0.88], [5, 5, 0.9], [6, 2, 1], 100);
}
image.crossorigin = '익명';
image.src = 'http://i.imgur.com/n7etzfo.jpg';
}
</스크립트>
<title> 와우! </제목>
</head>
<body onload = "run ();">
<img id = "배경"src = "" />
</body>
</html>
매우 멋진 효과가 아닙니까? 나는 모두가 그것을 좋아하기를 바랍니다.