js简单雨滴特效

最新推荐文章于 2025-05-23 12:18:46 发布

Timorls

最新推荐文章于 2025-05-23 12:18:46 发布

阅读量878

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/rubbish_Timor/article/details/98259144

js黑夜雨滴代码

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		<script>
			//雨滴
			var time = setInterval(function() {		//设置雨滴重复出现的定时器
				var rain = document.createElement("div");	//创建雨滴的div
				var colorList = ["darkred", "darkorange", "darkyellow", "darkgreen", "darkblue", "white", "darkpurple"];		//雨滴颜色的数组
				var color = parseInt(Math.random() * 7);		//随机数
				rain.style.backgroundColor = colorList[color];		//雨滴颜色
				rain.style.position = "absolute";		//设置绝对定位,div才能移动
				rain.style.width = '1px';
				rain.style.height = '20px';
				rain.style.top = "0px";		//雨滴距离顶部0px,即雨滴从顶部下落
				rain.style.opacity = 1.0;	
				rain.style.left = Math.random() * 1900 + "px";		//雨滴的位置从左方随机出现
				document.body.appendChild(rain);		//雨滴显示在body上
				var timer = setInterval(function() {		//雨滴运动的定时器;
					var height = parseInt(rain.style.top);		//雨滴与顶部距离的整型化
					var k = 1;
					k++;
					rain.style.top = height + 5 * Math.pow(k, 2) + "px";	//雨滴每次下落的距离大小
					if (rain.style.top >= "900px") {	//当雨滴到达底部
						rain.style.width = '5px';	//雨滴宽度变为500
						rain.style.height = '5px';	//雨滴高度变为5
						rain.style.borderRadius = "50%";	//圆形化雨滴
						var time2 = setInterval(function() {	//雨滴逐渐透明的定时器
							rain.style.opacity = rain.style.opacity - 0.1;	//每次透明0.1
						}, 50);
						rain.style.width = parseInt(rain.style.width) + 20 + "px";	//雨滴宽度加20,拉长
						rain.style.left = parseInt(rain.style.left)-12.5+"px";
					}

					if (rain.style.top >= "900px") {
						clearInterval(timer);
					}


				}, 50);
			}, 50);
		</script>
	</body>
</html>