For jquery custom container rain effect, you can change the rain icon to another

Css style
Copy codeThe Code is as follows:
<Style type = "text/css">
. Box {border-left: 5px solid # F93; border-right: 5px solid # F93; border-bottom: 10px solid # F93; width: 100px; height: 60px; position: absolute; top: 250px; left: 300px; z-index: 999; overflow: hidden ;}
. Box2 {border-left: 5px solid # F93; border-right: 5px solid # F93; border-bottom: 10px solid # F93; width: 100px; height: 60px; position: absolute; top: 250px; left: 500px; z-index: 999; overflow: hidden ;}
. Water {background: # 09F; width: 100%; position: absolute; bottom: 0px ;}
</Style>

Javascript
Copy codeThe Code is as follows:
<Script>

// Width: 400,
// Height: 300,
// Pic: 'water-drop.png ', // The Rain image watermark is water-drop.png
// Speed: 1000, // rain Rate
// Num: 100, // The intensity of raindrops
// Dir: ['right', 160], // by default, the rain drops to the right.


$ (Function (){
$ (". Container "). rain ({width: '000000', dir: ['right', 500], speed: 100, num: 3000, func: back_func });


})
Var I = 0;
Function back_func (d ){
If (parseInt ($ (". box "). position () ['left'] + $ (". box "). width ()> d & d> parseInt ($ (". box "). position () ['left']) {
If (I> $ (". box"). height ()){
$ (". Box. water"). animate ({height: 0 });
I = 0;
Return;
}
$ (". Box. water"). animate ({height: I ++ });
}

If (parseInt ($ (". box2 "). position () ['left'] + $ (". box2 "). width ()> d & d> parseInt ($ (". box2 "). position () ['left']) {
If (I> $ (". box2"). height ()){
$ (". Box2. water"). animate ({height: 0 });
I = 0;
Return;
}
$ (". Box2. water"). animate ({height: I ++ });
}
}
</Script>

Html
<Div class = "container">
<Div class = "box"> <div class = "water"> </div>
<Div class = "box2"> <div class = "water"> </div>
</Div>

In the same breath, the water-drop.png icon is a small rain icon. You can change it to another image.