rain.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
			background: black;
			overflow: hidden;
		}
		.rain{
			width: 2px;
			height: 10px;
			background: #fff;
			filter: blur(1px);
			position: absolute;
			left: 0;
			top: 0;
			transition: all ease 1s; 
		}
	</style>
	<body>
	</body>
</html>
<script type="text/javascript">
	for(let i=0;i<200;i++){
		let div=document.createElement('div');
		div.classList.add('rain');
		document.body.appendChild(div);
		let lefts=(window.innerWidth-200)*Math.random()+100;
		let tops=Math.random()*50;
		div.style.left=`${lefts}px`;
		div.style.top=`${tops}px`;	
	}
	document.body.onclick=function(){
		let rain=document.querySelectorAll('div');
		rain.forEach((element)=>{
			element.style.transition=`all ease 1s ${Math.random()}s`;
			element.style.top=`${window.innerHeight+50}px`;
			element.addEventListener('webkitTransitionEnd',function(){
				element.style.transition='none';
				element.style.top='-50px';
				setTimeout(function(){
				element.style.transition=`all ease 1s ${Math.random()}s`;
				element.style.top=`${window.innerHeight+50}px`;
			},1000)
			})
			
		})
	}
</script>