先上效果
流星雨.gif
注意事項(xiàng)
由于是用的純css优床，所以為了實(shí)現(xiàn)很多雨點(diǎn)，我們就需要?jiǎng)?chuàng)建很多個(gè) span/div（ 數(shù)量適量多即可）
然后,我們還需要用CSS預(yù)處理器之sass
首先VSCode安裝 Easy Sass的插件
sass.png
然后 在css文件夾創(chuàng)建 流星雨.scss（注意：后綴是scss)
流星雨scss.png
然后隨便寫(xiě)點(diǎn)css樣式忽舟，保存揍异，就會(huì)自動(dòng)生成同名字的css文件
流星雨css.png
之后引入同名的css就可以啦,至于為什么要用scss,因?yàn)楹芏鄠€(gè) span/div 的樣式创淡，然后還要想隨機(jī)數(shù)，你不會(huì)想被累死吧!!
下面是html代碼
HTML代碼
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
建議直接使用快捷語(yǔ)法 span*15 加回車(chē),直接創(chuàng)建出15個(gè)span
scss代碼
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
// 溢出隱藏
}
.box {
position: absolute;
top: 0;
left: 0;
// 絕對(duì)定位
width: 100%;
height: 100vh;
// 寬高100% vh是視窗百分比高度,1vh是1%
background: black;
// 黑色背景
}
span {
position: absolute;
top: 50%;
left: 50%;
// 絕對(duì)定位
width: 4px;
height: 4px;
// 寬高
background: #ffffff;
// 白色背景
border-radius: 50%;
// 邊框圓角
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 1);
// 盒子陰影
}
span::before {
content: '';
position: absolute;
top: 50%;
transform: translateX(0);
// 位置偏移 x軸,用于調(diào)整光點(diǎn)位置
width: 200px;
height: 1px;
background: linear-gradient(90deg, #fff, transparent);
// 創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片
}
@for $i from 1 through 185 {
span:nth-child(#{$i}) {
top: #{random(300)}px;
right: #{random(700)}px;
// random() 隨機(jī)數(shù) 700相當(dāng)于700以內(nèi)的隨機(jī)整數(shù)
left: initial;
// 因?yàn)橥瑫r(shí)設(shè)置left 和 right的話，left的權(quán)重比較高花嘶，此時(shí)right不生效笋籽。所以把left設(shè)置為initial，恢復(fù)為默認(rèn)的樣式察绷，此時(shí)再設(shè)置right的值就會(huì)生效了干签。
animation: animate #{random(2) + random()}s linear #{random(5)- random()}s infinite;
// 添加動(dòng)畫(huà)
}
}
@keyframes animate {
0% {
transform: rotate(315deg) translateX(-100px);
// 旋轉(zhuǎn)加偏移
opacity: 1;
// 透明度 值為0-1
}
70% {
opacity: 1;
}
100% {
transform: rotate(315deg) translateX(-1000px);
opacity: 0;
}
}
由于是外鏈?zhǔn)?所以大家復(fù)制粘貼拼接一下就可啦!要記得引入css文件哦!! 謝謝觀賞!!!
