HTML 雨景动画 - 雨天效果代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>下雨</title>
	<style>
		body {
			background-color: #fff;
		}
		.rain-container {
			position: relative;
			height: 500px;
			overflow: hidden;
		}
		.rain {
			position: absolute;
			top: -100px;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url('https://i.imgur.com/gVUqMwK.png');
			background-repeat: repeat-y;
			animation: raindrop 0.5s linear infinite;
		}
		.raindrop {
			position: absolute;
			top: -30px;
			left: 50%;
			width: 2px;
			height: 30px;
			background-color: #4d4d4d;
			transform: rotate(45deg);
			animation: fall 0.5s linear infinite;
			animation-delay: calc(var(--delay) * -1s);
			animation-fill-mode: both;
		}
		@keyframes fall {
			from {
				top: -30px;
				left: calc(50% + var(--range));
				opacity: 1;
			}
			to {
				top: 550px;
				left: calc(50% + var(--range));
				opacity: 0;
			}
		}
		@keyframes raindrop {
			from {
				background-position: 0 0;
			}
			to {
				background-position: 0 20px;
			}
		}
	</style>
</head>
<body>
	<div class='rain-container'>
		<div class='rain'>
			<span class='raindrop' style='--delay: 0; --range: -10px;'></span>
			<span class='raindrop' style='--delay: 0.1; --range: -20px;'></span>
			<span class='raindrop' style='--delay: 0.2; --range: -30px;'></span>
			<span class='raindrop' style='--delay: 0.3; --range: -40px;'></span>
			<span class='raindrop' style='--delay: 0.4; --range: -50px;'></span>
			<span class='raindrop' style='--delay: 0.5; --range: -60px;'></span>
			<span class='raindrop' style='--delay: 0.6; --range: -70px;'></span>
			<span class='raindrop' style='--delay: 0.7; --range: -80px;'></span>
			<span class='raindrop' style='--delay: 0.8; --range: -90px;'></span>
			<span class='raindrop' style='--delay: 0.9; --range: -100px;'></span>
		</div>
	</div>
</body>
</html>