使用CSS来制作下雨的效果

最新推荐文章于 2023-12-21 13:48:13 发布

几何小超

最新推荐文章于 2023-12-21 13:48:13 发布

阅读量752

点赞数 41

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_64965154/article/details/130998793

版权

首先我们来制作HTML部分

我们第一步呢还是先定义变量，loader，然后我们在下面在定义一个snow代表雪花，下面定义各自的变量，让20片雪花随机下滑

<div class="loader">
			<div class="snow">
				<span style="--i:11"></span>
				<span style="--i:12"></span>
				<span style="--i:15"></span>
				<span style="--i:17"></span>
				<span style="--i:18"></span>
				<span style="--i:13"></span>
				<span style="--i:14"></span>
				<span style="--i:19"></span>
				<span style="--i:20"></span>
				<span style="--i:10"></span>
				......
			</div>
		</div>

css部分

这里使用了伪类选择器

第一是做我们云朵的形状：我们先得设置相对定位，这样雪花才能来到我们下面

然后我们使用圆角边框，第二步我们来写伪元素，用伪元素画两个圆通过位置改变来组成云朵

第三个使用伪元素来设置雪花和雪花的动画效果

body{
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: black;
					transform: translateY(100px);
				}
			.loader{
				position: relative;
				width: 110px;
				height: 30px;
				background-color: #fff;
				border-radius: 100px;
			}
			.loader::before{
				content: '';
				position: absolute;
				width: 30px;
				height: 30px;
				background: #fff;
				border-radius: 50%;
				box-shadow: 40px 0 0 20px #fff;
				left: 10px;
				top: -20px;
			}
			.snow{
				position: relative;
				display: flex;
				z-index: 1;
			}
			.snow span{
				position: relative;
				width: 3px;
				height: 3px;
				background-color: #fff;
				margin: 0 2px;
				border-radius: 50%;
				animation: snowing 5s linear infinite;
				animation-duration: calc(15s / var(--i));
			}
			@keyframes snowing{
				from{
					transform: translateY(0px);
				}
				70%{
					transform: translateY(100px)
					scale(1);
				}
				to{
					transform: translateY(100px)
					scale:(0);
				}
			}

接下来展示源码！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
				body{
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: black;
					transform: translateY(100px);
				}
			.loader{
				position: relative;
				width: 110px;
				height: 30px;
				background-color: #fff;
				border-radius: 100px;
			}
			.loader::before{
				content: '';
				position: absolute;
				width: 30px;
				height: 30px;
				background: #fff;
				border-radius: 50%;
				box-shadow: 40px 0 0 20px #fff;
				left: 10px;
				top: -20px;
			}
			.snow{
				position: relative;
				display: flex;
				z-index: 1;
			}
			.snow span{
				position: relative;
				width: 3px;
				height: 3px;
				background-color: #fff;
				margin: 0 2px;
				border-radius: 50%;
				animation: snowing 5s linear infinite;
				animation-duration: calc(15s / var(--i));
			}
			@keyframes snowing{
				from{
					transform: translateY(0px);
				}
				70%{
					transform: translateY(100px)
					scale(1);
				}
				to{
					transform: translateY(100px)
					scale:(0);
				}
			}
		</style>
	</head>
	<body>
		<div class="loader">
			<div class="snow">
				<span style="--i:11"></span>
				<span style="--i:12"></span>
				<span style="--i:15"></span>
				<span style="--i:17"></span>
				<span style="--i:18"></span>
				<span style="--i:13"></span>
				<span style="--i:14"></span>
				<span style="--i:19"></span>
				<span style="--i:20"></span>
				<span style="--i:10"></span>
				......
			</div>
		</div>
	</body>
</html>

几何小超

关注

41
点赞
踩
33

收藏

觉得还不错? 一键收藏
打赏
29
评论
使用CSS来制作下雨的效果

我们第一步呢还是先定义变量，loader，然后我们在下面在定义一个snow代表雪花，下面定义各自的变量，让20片雪花随机下滑。然后我们使用圆角边框，第二步我们来写伪元素，用伪元素画两个圆通过位置改变来组成云朵。第一是做我们云朵的形状：我们先得设置相对定位，这样雪花才能来到我们下面。第三个使用伪元素来设置雪花和雪花的动画效果。首先我们来制作HTML部分。这里使用了伪类选择器。
复制链接

扫一扫