css 雨滴特效 |css盒子嵌套外边距塌陷

.raindrop {
width: 20px;
height: 20px;
position: absolute;
background: rgba(255, 255, 255, 0.7);
filter: blur(1px);
border-radius: 50%;
animation: drop 2s ease infinite;
}
@keyframes drop {
0% {
transform: translate(0, -100%);
}
100% {
transform: translate(80vw, 100vh);
}
}
.raindrop:nth-child(2n) {
animation-delay: -1s;
}

代码解释：

首先，大家定义了一个类名为 .raindrop 的样式，用于设置雨滴的样式。设置宽高为20px，定位方式为绝对定位，背景色为半透明白色。

接着，使用滤镜属性给雨滴添加高斯模糊效果，使其看起来更加真实。

为了让雨滴能够动起来，大家使用了CSS3的动画属性，设置动画名称为 drop，动画时间为2s，动画效果为ease，并使其无限循环。

下面是动画具体过程，在开始时，雨滴的位置在页面的最上方，通过 transform:translate() 属性向下移动，直到达到页面的底部，动画结束。

最后，通过 nth-child(2n) 选择器为偶数个雨滴，添加动画延迟效果，使得雨滴从不同的位置开始下落，增加视觉效果。

以上就是制作CSS雨滴特效的具体步骤。如果设置透明度不足以达到想要的效果，还可以给雨滴添加图片素材，让雨滴看起来更加真实。希望这篇文章对大家有所帮助。