（看着别人的做的，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://blog.csdn.net/m0_52212261/article/details/122511580
版权归原作者 gronkie 所有， 如有侵权，请联系我们删除。
版权归原作者 gronkie 所有， 如有侵权，请联系我们删除。