先上效果
雨.gif
注意事项
由于是用的纯css，所以为了实现很多雨点，我们就需要创建很多个div（ 数量适量多即可）
然后,我们还需要用CSS预处理器之sass
首先VSCode安装 Easy Sass的插件
sass.png
然后 在css文件夹创建 下雨.scss（注意：后缀是scss)
scss文件.png
然后随便写点css样式，保存，就会自动生成同名字的css文件
css文件.png
之后引入任意一个同名的css就可以啦,至于为什么要用scss,因为很多个div的样式，然后还要想随机数，会被累死啦!!!
下面是html代码
HTML代码
<body>
<div class="rain"></div>
<div class="rain"></div>
<div class="rain"></div>
<div class="rain"></div>
<div class="rain"></div>
<div class="rain"></div>
<div class="rain"></div>
<div class="rain"></div>
<div class="rain"></div>
<div class="rain"></div>
<div class="rain"></div>
<div class="rain"></div>
</body>
你们会发现但是一样的,建议直接使用快捷语法 .rain*200 加回车,直接创建出200个div
scss代码
html,
body {
width: 100vw;
height: 100vh;
// 宽高,vw 视窗宽度的百分比(1vw等于1%) vh 视窗高度的百分比
overflow: hidden;
// 溢出隐藏
margin: 0;
padding: 0;
background: #000;
}
.rain {
width: var(--size);
height: var(--hsize);
--size: 2px;
// 声明变量,规定宽
border-radius: 200% 200% 0 0;
// 边框圆角
position: absolute;
// 绝对定位
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.6)
);
// 创建一个表示两种或多种颜色线性渐变的图片
}
@for $i from 1 through 200 {
// .@for $var from <start> through <end>:
// 此种方式的遍历索引区间是[start,end]
// 这里的200相当于速度
.rain:nth-child(#{$i}) {
--size: #{random(10) * 0.2}px;
--hsize: #{random(3) * 12}px;
// 调整宽高
--left-ini: #{random(20) - 10}vw;
--left-end: #{random(20) - 10}vw;
// random(20) - 10 20以内的随机数减10
left: #{random(100)}vw;
// 也是随机数,定位的随机偏移
animation: rain #{0.5 + random(4)}s linear -#{random(10)}s infinite;
// 添加动画
}
}
@keyframes rain {
0% {
transform: translate3d(var(--left-ini), 0, 0);
// 创建变量,与上面相对应,translate 位移
}
75% {
transform: translate3d(var(--left-ini), 100vh, 0);
}
100% {
transform: translate3d(var(--left-end), 100vh, 0);
}
}
.rain:nth-child(6n) {
// 三行交替,滤镜模糊效果
filter: blur(1px);
}
由于是外链式,所以大家复制粘贴拼接一下就可啦!要记得引入css文件哦!! 谢谢观赏!!!
网友评论