(看着别人的做的,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);} 这一行就不起作用了,当时可把我整不会了,还是人太菜,跟我一样刚入门的稍微注意点,别写错了
又是日常吐槽,这么简单的东西,还跟着别人的视频打代码,这都能耗我一上午,日常被自己菜的自闭