（看著別人的做的，yysy視頻講的真的好詳細，像我這種小白都能聽懂了雨滴特效）
大概思路就是，把每個雨滴看作是一個寬為 5px ， 長為 30px 的 div，然后用 js 創建視窗大小 / 5 個數量的雨滴，然后設定位置，讓它們按行擺開（就是鋪滿）
然后給它們賦予一個影像漸變屬性 linear-gradient，讓影像看起來是從透明漸變為一個隨機顏色，再把雨滴的前端設定為圓形的（讓它看起來像是一個雨滴，雖然很丑）
最后設定一個影片效果，讓雨滴從螢屏上方移動到螢屏下方直到看不見，回圈進行該影片，給雨滴設定一個隨機的影片前的延遲時間（但注意，設定了延遲時間后，影片就不是直接開始了，所以雨滴出現的位置最開始并不在影片的起始位置，而是起初的設定位置，所以起初的位置需要設定在螢屏上面），最后再給雨滴的運動設定一個隨機的速度曲線（先慢后快即可）
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0px;
padding: 0px;
}
#div_raindrops{
position: fixed;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.raindrops_item{
position: absolute;
width: 5px;
height: 30px;
border-radius: 0% 0% 5px 5px;
transform: translateY(-200px);
animation-name: raindrops;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes raindrops{
from {transform: translateY(-200px);}
to {transform: translateY(100vh);}
}
</style>
</head>
<body>
<div id = "div_raindrops">
<div class = "raindrops_item"></div>
</div>
<script>
const div_raindrops = document.getElementById('div_raindrops');
for(var i = 0; i < div_raindrops.clientWidth / 5; i++){
var raindrops_item = document.createElement('div');
raindrops_item.className = 'raindrops_item';
raindrops_item.style.backgroundImage = 'linear-gradient(transparent,rgb(' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + Math.random() * 255 + '))';
raindrops_item.style.animationDelay = Math.random() * 10 + 's';
raindrops_item.style.left = i * 5 + 'px';
raindrops_item.style.animationTimingFunction = 'cubic-bezier(' + (Math.random() * 0.4 + 0.6) + ',' + (Math.random() * 0.2) + ',' + (Math.random() * 0.2 + 0.8) + ',' + (Math.random() * 0.2 + 0.4) + ')';
div_raindrops.append(raindrops_item);
}
</script>
</body>
</html>
由于我過于小白，當時把這格式寫錯了，寫成了
@keyframes raindrops{
from {transform: translateY(-200px);};//（這里多了個分號）
to {transform: translateY(100vh);}
}
然后就寄了，相當于 to {transform: translateY(100vh);} 這一行就不起作用了，當時可把我整不會了，還是人太菜，跟我一樣剛入門的稍微注意點，別寫錯了
又是日常吐槽，這么簡單的東西，還跟著別人的視頻打代碼，這都能耗我一上午，日常被自己菜的自閉
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413474.html
標籤：其他
上一篇：Border of CSS3