前端入门（雨滴特效，css）

前端入门（雨滴特效，css） 2022-06-24 886

（看着别人的做的，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);} 这一行就不起作用了，当时可把我整不会了，还是人太菜，跟我一样刚入门的稍微注意点，别写错了

又是日常吐槽，这么简单的东西，还跟着别人的视频打代码，这都能耗我一上午，日常被自己菜的自闭

免费搭建微信查券返利机器人来轻松赚佣金