<!-- "Дождь" Часть 1 -->
<style>/** © 2017 Artem Malcov | https://www.pandoge.com/moduli-i-skripty/krossbrauzernyy-effekt-dozhdya-na-javascriptcss **/

.rain {
	position: fixed;
	width: 1px; /* Ширина капли */
	height: 9px; /* Высота капли */
	top: -3px;
	background-color: #fff; /* Цвет капли */
	animation: rain 1.2s linear infinite;
	z-index: 99;
	border-radius: 1px;
}

@keyframes rain {
	to {
    transform: translate3d(200px, 1000px, 0); /* Первое значение (200px) это направление дождя, где: 0 - вниз, положительное число - вправо, отрицательное - влево */
	}
}
</style>
<!-- конец: "Дождь" Часть 1 -->

<!-- "Дождь" Часть 2 -->
<script>

	function random(min, max) {
	
    var rand = min + Math.random() * (max + 1 - min);
    rand = Math.floor(rand);
    
    return rand;
    
	}

	for (var i=0; i<200; i++) {
	
    document.getElementsByTagName('body')[0].innerHTML += '<i class="rain" style="left: '+random(-2000, 2000)+'px;transform: translate3d(0, 0, 0);animation-delay: '+(0.01 * i)+'s"></i>';
	
	}
	
</script>
<!-- конец: "Дождь" Часть 2 -->