前端入门（雨滴特效，css）
（看着别人的做的，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);} 这一行就不起作用了，当时可把我整不会了，还是人太菜，跟我一样刚入门的稍微注意点，别写错了
又是日常吐槽，这么简单的东西，还跟着别人的视频打代码，这都能耗我一上午，日常被自己菜的自闭
上一篇：
IDEA上Java项目控制台中文乱码