Aqui, usamos principalmente uma biblioteca JS do Rainyday, que é muito simples e conveniente de usar, por isso não falamos muito bobagem, basta ler o código de demonstração.
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd html 4.01 transitório // pt" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style media = "Screen">
corpo {
estouro: oculto;
Altura: 100%;
margem: 0;
preenchimento: 0;
}
img {
largura: 100%;
Altura: 100%;
}
</style>
)
<script type = "text/javascript">
function run () {
var imagem = document.getElementById ('Background');
image.onload = function () {
var motor = novo dia de chuva ({
Imagem: este,
});
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> uau! </title>
</head>
<corpo onload = "run ();">
<img id = "background" src = "" />
</body>
</html>
Não é um efeito muito legal? Espero que todos gostem.