Hier verwenden wir hauptsächlich eine JS -Bibliothek von Rainyday, die sehr einfach und bequem zu bedienen ist. Daher sprechen wir nicht viel Unsinn. Lesen Sie einfach den Demo -Code.
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8">
<style Media = "Bildschirm">
Körper {
Überlauf: versteckt;
Höhe: 100%;
Rand: 0;
Polsterung: 0;
}
img {
Breite: 100%;
Höhe: 100%;
}
</style>
<script src = "http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
Funktion run () {
var image = document.getElementById ('Hintergrund');
Image.onload = function () {
var Engine = neuer Rainyday ({{
Bild: Dies,,
});
Motor.rain ([[1, 2, 8000]]);
Motor.rain ([[3, 3, 0,88], [5, 5, 0,9], [6, 2, 1]], 100);
}
Image.Crossorigin = 'Anonymous';
Image.src = 'http://i.imgur.com/n7etzfo.jpg';
}
</script>
<title> wow! </title>
</head>
<body onload = "run ();">
<img id = "Hintergrund" src = "" />
</body>
</html>
Ist es nicht ein sehr cooler Effekt? Ich hoffe, es mag alle.