css+js to make the background of water droplets that move freely

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<script>
			function createStar() {
      
      
				let waterDiv = document.createElement('div');
				waterDiv.className = 'waterDiv';
				
				let water = document.createElement('div');
				water.className = 'water';
				
				let xj = document.createElement('div');
				xj.className = 'xj';
				
				let d1 = document.createElement('div');
				d1.className = 'd1';
				
				water.appendChild(xj);
				water.appendChild(d1);
				waterDiv.appendChild(water);
				
				let startX = Math.floor(Math.random() * (window.innerWidth-80) ); // 随机起始位置的X坐标
				let startY = Math.floor(Math.random() * (window.innerHeight-80) ); // 随机起始位置的Y坐标
				let endX = Math.floor(Math.random() * (window.innerWidth-80) ); // 随机结束位置的X坐标
				let duration = Math.floor(Math.random() * 3000 + 1000); // 随机动画时长（1000毫秒到4000毫秒之间）
				let jsWaterDiv = $(waterDiv);
				
				// 设置初始位置
				jsWaterDiv.css({
      
      
					left: startX + 'px',
					top: startY + 'px',
					opacity: 1
				});

				//决定水滴的上下方向
				let f = (window.innerHeight-startY-80)+"px" ;
				if ( startY >= (window.innerWidth*0.8) ) {
      
      
					//生成在了偏下的地方就向上走
					f = (startY+80)+"px";
				}

				// 定义动画
				jsWaterDiv.animate({
      
      
					left: endX + 'px',
					top: f,
					opacity: 0
				}, duration, function() {
      
      
					// 动画完成后移除流星
					jsWaterDiv.remove();
				});

				// 将水滴添加到页面中
				$('body').append(jsWaterDiv);

			}

			// 每隔半秒创建一颗流星
			setInterval(createStar, 1000);
		</script>

		<style>
			* {
      
      
				margin: 0;
				padding: 0;
			}

			/*最外侧盒子提供大小和其他位置顶自定义需求*/
			.waterDiv {
      
      
				width: 80px;
				height: 80px;
				position: absolute;
			}

			/*第二层盒子提供需要的背景色以及形状*/
			.water {
      
      
				width: 100%;
				height: 100%;
				background-color: #00a8ff;
				border-radius: 61% 39% 57% 43% / 46% 67% 33% 54%;
				animation: a 4s linear infinite alternate;
				position: absolute;
			}

			/*内侧盒子负责水滴的细节，形状同步*/
			.xj {
      
      
				width: 100%;
				height: 100%;
				border-radius: 61% 39% 57% 43% / 46% 67% 33% 54%;
				box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5),
					10px 10px 20px rgba(0, 0, 0, 0.3),
					15px 15px 30px rgba(0, 0, 0, 0.05),
					inset -10px -20px 30px rgba(255, 255, 255, 0.8);
				animation: a 4s linear infinite alternate;
				position: absolute;
			}

			/*内部的白点*/
			.d1 {
      
      
				width: 10px;
				height: 10px;
				position: absolute;
				top: 20px;
				left: 20px;
				background-color: rgba(255, 255, 255, 0.8);
				border-radius: 46% 54% 36% 64% / 46% 43% 57% 54%;
				animation: b 2s linear infinite alternate;
			}

			/*整个水滴形状的动画*/
			@keyframes a {
      
      
				25% {
      
      
					border-radius: 58% 42% 59% 41% / 52% 46% 54% 48%;
				}

				50% {
      
      
					border-radius: 46% 54% 40% 60% / 52% 33% 67% 48%;
				}

				75% {
      
      
					border-radius: 65% 35% 71% 29% / 31% 60% 40% 69%;
				}

				100% {
      
      
					border-radius: 60% 40% 43% 57% / 45% 51% 49% 55%;
				}
			}

			/*水滴中白色小点的动画*/
			@keyframes b {
      
      
				25% {
      
      
					top: 21px;
					left: 19px;
				}

				50% {
      
      
					top: 22px;
					left: 18.5px;
				}

				100% {
      
      
					top: 23px;
					left: 18px;
				}
			}
		</style>
	</body>
</html>
css+js to make the background of water droplets that move freely

Guess you like
