前端入门(雨滴特效,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);} 这一行就不起作用了,当时可把我整不会了,还是人太菜,跟我一样刚入门的稍微注意点,别写错了

前端入门(雨滴特效,css)_第1张图片

又是日常吐槽,这么简单的东西,还跟着别人的视频打代码,这都能耗我一上午,日常被自己菜的自闭
在这里插入图片描述

你可能感兴趣的:(css,前端,javascript,css,html,前端特效)