先上效果
雨.gif
注意事項
由于是用的純css，所以為了實現(xiàn)很多雨點，我們就需要創(chuàng)建很多個div（ 數(shù)量適量多即可）
然后,我們還需要用CSS預(yù)處理器之sass
首先VSCode安裝 Easy Sass的插件
sass.png
然后 在css文件夾創(chuàng)建 下雨.scss（注意：后綴是scss)
scss文件.png
然后隨便寫點css樣式，保存，就會自動生成同名字的css文件
css文件.png
之后引入任意一個同名的css就可以啦,至于為什么要用scss,因為很多個div的樣式，然后還要想隨機數(shù)，會被累死啦!!!
下面是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>
你們會發(fā)現(xiàn)但是一樣的,建議直接使用快捷語法 .rain*200 加回車,直接創(chuàng)建出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;
// 聲明變量,規(guī)定寬
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)
);
// 創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片
}
@for $i from 1 through 200 {
// .@for $var from <start> through <end>:
// 此種方式的遍歷索引區(qū)間是[start,end]
// 這里的200相當(dāng)于速度
.rain:nth-child(#{$i}) {
--size: #{random(10) * 0.2}px;
--hsize: #{random(3) * 12}px;
// 調(diào)整寬高
--left-ini: #{random(20) - 10}vw;
--left-end: #{random(20) - 10}vw;
// random(20) - 10 20以內(nèi)的隨機數(shù)減10
left: #{random(100)}vw;
// 也是隨機數(shù),定位的隨機偏移
animation: rain #{0.5 + random(4)}s linear -#{random(10)}s infinite;
// 添加動畫
}
}
@keyframes rain {
0% {
transform: translate3d(var(--left-ini), 0, 0);
// 創(chuàng)建變量,與上面相對應(yīng),translate 位移
}
75% {
transform: translate3d(var(--left-ini), 100vh, 0);
}
100% {
transform: translate3d(var(--left-end), 100vh, 0);
}
}
.rain:nth-child(6n) {
// 三行交替,濾鏡模糊效果
filter: blur(1px);
}
由于是外鏈?zhǔn)?所以大家復(fù)制粘貼拼接一下就可啦!要記得引入css文件哦!! 謝謝觀賞!!!
