css云朵☁️下雨

最新推荐文章于 2024-07-21 20:52:32 发布

weixin_43372631

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量170

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43372631/article/details/128948920

版权

文章展示了如何使用HTML创建结构，CSS设计样式，以及JavaScript实现动态效果，特别是创建一个逼真的下雨特效。HTML部分包含云朵的结构，CSS用于定义样式和动画，而JS则用来生成随机的雨滴并控制其下落行为。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="cloudy">
			<div class="rain"> 
			  <span style="--speed:11"></span>
			  <span style="--speed:12"></span>
			  <span style="--speed:15"></span>
			  <span style="--speed:17"></span>
			  <span style="--speed:18"></span>
			  <span style="--speed:13"></span>
			  <span style="--speed:15"></span>
			  <span style="--speed:19"></span>
			  <span style="--speed:20"></span>
			  <span style="--speed:10"></span>
			  <span style="--speed:18"></span>
			  <span style="--speed:16"></span>
			  <span style="--speed:14"></span>
			  <span style="--speed:11"></span>
			  <span style="--speed:12"></span>
			  <span style="--speed:17"></span>
			  <span style="--speed:14"></span>
			  <span style="--speed:27"></span>
			  <span style="--speed:12"></span>
			</div>
		</div>
	</body>
	<style>
		*{
			margin:0;
			padding:0
		}
		body{
			display: flex;
			align-items: center;
			justify-content: center;
			width:100vw;
			height: 100vh;
			background-color: pink;
		}
		
		.cloudy{
			position: relative;
			width:100px;
			height:40px;
			border-radius: 100px;
			background-color: #fff;
		}
		.cloudy::before {
			content: '';
			position: absolute;
			top: -20px;
			left: 10px;
			width: 30px;
			height:30px;
			background: #fff;
			border-radius: 50%;
			/* 利用盒子阴影制作右边云彩 */
			box-shadow: 40px 0 0px 20px #fff;
		}
		.rain{
			display: flex;
			z-index: 1;
			position: relative;
		}
		.rain span {
			position: relative;
			width: 8px;
			height: 8px;
			background: #fff;
			margin: 10px 2px;
			border-radius: 50%;
			/* 动画匀速运行 且自动循环 */
			animation: rain linear infinite;
			/* 设置下雨的速度 */
			animation-duration: calc(15s/var(--speed));
			/* 原点位置 */
			transform-origin: bottom;
		}
		
		@keyframes rain {
			0% {
				transform: translateY(0);
			}
		
			70% {
				transform: translateY(100px) scale(1);
			}
		
			100% {
				transform: translateY(100px) scale(0);
			}
		}
	</style>
</html>

2. js下雨特效

        <div id="rainBox"></div>
		<script>
			const box = document.getElementById('rainBox');
			let boxHeight = box.clientHeight;
			let boxWidth = box.clientWidth;
			window.onresize = function() {
				boxHeight = box.clientHeight;
				boxWidth = box.clientWidth;
			}
			setInterval(() => {
				const rain = document.createElement('div');
				rain.classList.add('rain');
				rain.style.top = 0;
				rain.style.left = Math.random() * boxWidth + 'px';
				rain.style.opacity = Math.random(); //0~1
				box.appendChild(rain)

				let race = 1;
				const timer = setInterval(() => {
					if (parseInt(rain.style.top) > boxHeight) {
						clearInterval(timer)
						box.removeChild(rain)
					}
					race++
					rain.style.top = parseInt(rain.style.top) + race + 'px';

				}, 20)

			}, 50)
		</script>

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

			#rainBox {
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				background-color: pink;
				/* 不阻挡其他元素事件触发 */
				pointer-events: none;
				/* 元素对指针事件 */
			}

			.rain {
				position: absolute;
				width: 2px;
				height: 50px;
				background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .6));
			}
		</style>