CSS制作下雨动画效果教程，你学会了吗？

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

好雨知时节，当春乃发生。随风潜入夜，润物细无声。

春节已经过去，新的一年刚刚开始，小伙伴们，今年你的目标是什么？定个小目标，挣它一个亿？分享一下我的目标，是让大家的web前端能力，更上一层楼。

下面进入主题，看下图：

CSS3线性渐变、阴影、缩放实现动画下雨效果

这个动画效果，如果让你来做，你会选择什么方式？相信很多小伙伴都会用gif图片。其实用css实现也很简单。

如果文章中有不懂的知识点，请点击文章最下方，推荐文章哦

动画解析

很明显这个动画效果，是上中下结构，所以我们分3部分实现。

1、云：由多个圆拼接而成，并且有上下浮动的动画效果

2、雨滴：多个，从上而下的动画效果

3、阴影：椭圆，缩放动画效果

下面我们按步骤实现

云

用box-shadow制作多个圆，完成拼接，行程完整的云朵。animation，添加动画，上下浮动。

语法：box-shadow: h-shadow v-shadow blur spread color inset;
注：box-shadow，向框内添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

CSS3线性渐变、阴影、缩放实现动画下雨效果

相关推荐CSS3 box-shadow实现背景动画

.rainy {
 position: absolute;
 top: 30%;
 left: 50%;
}
.rainy:before {
 content: "";
 color: #333;
 position: absolute;
 height: 50px;
 width: 50px;
 top: 30px;
 left: -40px;
 background: #CCC;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 box-shadow: #CCC 65px -15px 0 -5px, 
 #CCC 25px -25px, 
 #CCC 30px 10px, 
 #CCC 60px 15px 0 -10px, 
 #CCC 85px 5px 0 -5px;
 animation: cloudy 5s ease-in-out infinite;
}
@keyframes cloudy {
 50% {
 transform: translate(-50%, -70%);
 }
 100% {
 transform: translate(-50%, -50%);
 }
}

CSS3线性渐变、阴影、缩放实现动画下雨效果

雨滴

雨滴和云一样，都是用box-shadow来实现，但是雨滴的实现要复杂的多，雨滴数量多，每个雨滴位置的改变。

.rainy {
 position: absolute;
 width: 3px;
 height: 6px;
 top: 30%;
 left: 50%;
 animation: rainy_rain .7s infinite linear;
}
.rainy:before {
 ...
}
@keyframes cloudy {
 ...
}
@keyframes rainy_rain {
 0% {
 box-shadow: 
 rgba(0, 0, 0, 0) -10px 30px, 
 rgba(0, 0, 0, 0) 40px 40px, 
 rgba(0, 0, 0, .3) -50px 75px, 
 rgba(0, 0, 0, .3) 55px 50px, 
 rgba(0, 0, 0, .3) -18px 100px, 
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
 25% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 120px,
 rgba(0, 0, 0, 0) 12px 120px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 26% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 40px,
 rgba(0, 0, 0, 0) 12px 20px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 50% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 100px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 51% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 45px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 75% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 95px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 120px,
 rgba(0, 0, 0, 0) 30px 110px;
 }
 76% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 35px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 25px,
 rgba(0, 0, 0, 0) 30px 15px;
 }
 100% {
 box-shadow:
 rgba(0, 0, 0, 0) -10px 120px,
 rgba(0, 0, 0, 0) 40px 120px,
 rgba(0, 0, 0, .3) -50px 75px,
 rgba(0, 0, 0, .3) 55px 50px,
 rgba(0, 0, 0, .3) -18px 100px,
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
}

CSS3线性渐变、阴影、缩放实现动画下雨效果

阴影

阴影实现是最简单的啦，加上缩放，透明度改变就可以了，当然要和上面的云配合起来，云上，阴影变小，云下，阴影变大。

.rainy:after {
 content: "";
 position: absolute;
 top: 120px;
 left: 50%;
 height: 15px;
 width: 120px;
 background: rgba(0, 0, 0, .5);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy_shadow {
 50% {
 transform: translate(-50%, -50%) scale(0.8);
 background: rgba(0, 0, 0, .2);
 }
 100% {
 transform: translate(-50%, -50%) scale(1);
 background: rgba(0, 0, 0, .5);
 }
}

演示地址：http://demo.javanx.cn/raindrop/index2.html

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

好雨知时节，当春乃发生。随风潜入夜，润物细无声。

下面进入主题，看下图：

CSS3线性渐变、阴影、缩放实现动画下雨效果

这个动画效果，如果让你来做，你会选择什么方式？相信很多小伙伴都会用gif图片。其实用css实现也很简单。

如果文章中有不懂的知识点，请点击文章最下方，推荐文章哦

动画解析

很明显这个动画效果，是上中下结构，所以我们分3部分实现。

1、云：由多个圆拼接而成，并且有上下浮动的动画效果

2、雨滴：多个，从上而下的动画效果

3、阴影：椭圆，缩放动画效果

下面我们按步骤实现

云

用box-shadow制作多个圆，完成拼接，行程完整的云朵。animation，添加动画，上下浮动。

语法：box-shadow: h-shadow v-shadow blur spread color inset;
注：box-shadow，向框内添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

CSS3线性渐变、阴影、缩放实现动画下雨效果

相关推荐CSS3 box-shadow实现背景动画

.rainy {
 position: absolute;
 top: 30%;
 left: 50%;
}
.rainy:before {
 content: "";
 color: #333;
 position: absolute;
 height: 50px;
 width: 50px;
 top: 30px;
 left: -40px;
 background: #CCC;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 box-shadow: #CCC 65px -15px 0 -5px, 
 #CCC 25px -25px, 
 #CCC 30px 10px, 
 #CCC 60px 15px 0 -10px, 
 #CCC 85px 5px 0 -5px;
 animation: cloudy 5s ease-in-out infinite;
}
@keyframes cloudy {
 50% {
 transform: translate(-50%, -70%);
 }
 100% {
 transform: translate(-50%, -50%);
 }
}

CSS3线性渐变、阴影、缩放实现动画下雨效果

雨滴

雨滴和云一样，都是用box-shadow来实现，但是雨滴的实现要复杂的多，雨滴数量多，每个雨滴位置的改变。

.rainy {
 position: absolute;
 width: 3px;
 height: 6px;
 top: 30%;
 left: 50%;
 animation: rainy_rain .7s infinite linear;
}
.rainy:before {
 ...
}
@keyframes cloudy {
 ...
}
@keyframes rainy_rain {
 0% {
 box-shadow: 
 rgba(0, 0, 0, 0) -10px 30px, 
 rgba(0, 0, 0, 0) 40px 40px, 
 rgba(0, 0, 0, .3) -50px 75px, 
 rgba(0, 0, 0, .3) 55px 50px, 
 rgba(0, 0, 0, .3) -18px 100px, 
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
 25% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 120px,
 rgba(0, 0, 0, 0) 12px 120px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 26% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 40px,
 rgba(0, 0, 0, 0) 12px 20px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 50% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 100px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 51% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 45px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 75% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 95px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 120px,
 rgba(0, 0, 0, 0) 30px 110px;
 }
 76% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 35px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 25px,
 rgba(0, 0, 0, 0) 30px 15px;
 }
 100% {
 box-shadow:
 rgba(0, 0, 0, 0) -10px 120px,
 rgba(0, 0, 0, 0) 40px 120px,
 rgba(0, 0, 0, .3) -50px 75px,
 rgba(0, 0, 0, .3) 55px 50px,
 rgba(0, 0, 0, .3) -18px 100px,
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
}

CSS3线性渐变、阴影、缩放实现动画下雨效果

阴影

阴影实现是最简单的啦，加上缩放，透明度改变就可以了，当然要和上面的云配合起来，云上，阴影变小，云下，阴影变大。

.rainy:after {
 content: "";
 position: absolute;
 top: 120px;
 left: 50%;
 height: 15px;
 width: 120px;
 background: rgba(0, 0, 0, .5);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy_shadow {
 50% {
 transform: translate(-50%, -50%) scale(0.8);
 background: rgba(0, 0, 0, .2);
 }
 100% {
 transform: translate(-50%, -50%) scale(1);
 background: rgba(0, 0, 0, .5);
 }
}

演示地址：http://demo.javanx.cn/raindrop/index2.html

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”

上有很多文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画：通过背景处理看起来也有视觉上的3D效果，但并非真正的3D场景，如果要加入用户交互，进行360°全景浏览就很难实现，并且粒子放大后会失真。

今天我们使用JavaScript和WebGL来实现一个真正3D建模的下雨动画，所使用的技术可用于很多场景（demo效果可访问：http://www.ikinsoft.com/3ddemo/rain.html）。

先看一下效果图：

逼真的下雨动画效果图

要使用WebGL绘图，总体上有4个步骤，初始化webgl绘图环境、建立数据模型并绑定缓存、建立着色器程序、关联着色器属性和缓存完成绘制或动画。

3D雨滴的绘制原理

要实现一个下雨动画，我们首先要实现一个3D雨滴的绘制。

3D雨滴具有如下特点：

1、雨滴是一个不规则椭球体，因为重力效应，下面胖上面瘦，Z轴长度比X/Y轴要长
2、雨滴是一个球透镜。球透镜是凸透镜的一种。凸透镜的成像原理：当物距（u）大于二倍焦距（f）时，所成像为倒立缩小的实像。

下图右为平行但不经过主光轴的光线入射球透镜时的光路图；球透镜的焦距（f）即由球心（O）到焦点（F）的距离。

［左］凸透镜的成像原理；［右］球透镜的光路图，入射光线平行但不经过主光轴。

经计算可以得出，球透镜的焦距为：

其中，N 为透镜材料的折射率，我们知道水的折射率约为1.33（玻璃的折射率为1.5~1.9），不难算出雨滴的焦距（约为） f ≈ 2R。

在摄影/观察雨景过程中，物距一般远大于2倍焦距的，故透过雨滴观察到的，是远景的倒立缩小实像。

3、雨滴和水晶球一样，会产生“桶形畸变”，如下图

4、由于存在重力加速度，雨滴将呈现加速下落的运动
5、雨滴的大小是随机的，而小雨滴容易受到风阻影响，所以原则上大雨滴的下落速度要快，也就是雨滴的速度是各自不同的。

我们完成一个雨滴对象的绘制后，在尺寸、形状和位置这个方面引入随机量，从而生成大量雨滴。最后在Y方向上添加恒定加速度和随机阻力，形成下落的动画。

生成不规则椭球体

所谓创建一个球体，在WebGL中，我们是创建一个多面体，而多面体由一组顶点所定义。

我们模仿地球，使用经纬线来生成椭球体的各个顶点（vertex），坐标设定使用椭球体坐标公式：

x=asinθcosφ
y=bsinθsinφ
z=ccosθ (0≤θ≤π, 0≤φ<2π)

其中a,b,c是椭球体的3个半径，θ（theta）是z轴夹角，φ(phi)是投影到x/y平面上从x开始的夹角。

代码类似如下：(注意WebGL中的x/y/z坐标轴的方向和上述立体几何学中不完全相同）

var latitudeBands = 60;
var longitudeBands = 60;
var radius = 0.4;
var aRadius = radius * 1.2;
var bRadius = radius * 1.3;
var cRadius = radius * 1.0;
var vertexPositionData = [];
var normalData = [];
var textureCoordData = [];
for (var latNumber = 0; latNumber <= latitudeBands; latNumber++) {
var theta = latNumber * Math.PI / latitudeBands;
var sinTheta = Math.sin(theta);
var cosTheta = Math.cos(theta);
for (var longNumber = 0; longNumber <= longitudeBands; longNumber++) {
var phi = longNumber * 2 * Math.PI / longitudeBands;
var sinPhi = Math.sin(phi);
var cosPhi = Math.cos(phi);
var x = aRadius * cosPhi * sinTheta;
var y = bRadius * cosTheta;
var z = cRadius * sinPhi * sinTheta;
vertexPositionData.push(radius * x);
vertexPositionData.push(radius * y);
vertexPositionData.push(radius * z);
}
}

创建透镜效果

透镜效果最主要的就是要实现一个倒影图像，我们使用纹理贴图(Texture)来实现。贴图到球面的投影，参考地图圆柱体投影方法（原理见下图）来实现：

不同的是，只需要投影正面区域，因为我们一般只观察正前方区域，我们可以制作一个半面的贴图。我们可以直接把贴图旋转180°，或者通过投影时给y坐标一个负数值来实现倒影效果。

//纹理图片加载完成时执行的回调函数
function handleLoadedTexture(texture) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);//把几何坐标转换成屏幕坐标，即Y轴翻转
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);//使用TEXTURE0来绑定贴图
//设置纹理缩放过滤器参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
var dropTexture;
function initTexture() {
dropTexture = gl.createTexture();
dropTexture.image = new Image();
dropTexture.image.onload = function() {
handleLoadedTexture(dropTexture)
}
dropTexture.image.src = "//wow.techbrood.com/assets/love_half_r.png";
}
//按照外切圆柱投影法生成顶点纹理贴图的坐标
for (var latNumber = 0; latNumber <= latitudeBands; latNumber++) {
aRadius -= latNumber * radius / 1000;
var theta = latNumber * Math.PI / latitudeBands;
var sinTheta = Math.sin(theta);
var cosTheta = Math.cos(theta);
for (var longNumber = 0; longNumber <= longitudeBands; longNumber++) {
var u = 1 - (longNumber / longitudeBands);
var v = 1 - (latNumber / latitudeBands);
textureCoordData.push(u);
textureCoordData.push(v);
}
}

我们通过上面的方法处理球面贴图时，会同时生成相应的桶形变形效果。

随机雨滴的生成和动画

接下来我们给雨滴的形状、大小、位置以及速度添加随机分量，来模拟下雨的动画。

function drawScene() {
//......
for (var i = 0; i < SPHERE_NUM; i++) {
g_mMatrix[i][13] -= 0.1 + i * Math.random() * 0.002;//随机速度
if (g_mMatrix[i][13] < -6.5) {//随机位置
g_mMatrix[i][12] = Math.random() * 30.0 - 15.0;
g_mMatrix[i][13] = 6.5;
g_mMatrix[i][14] = Math.random() * 4.0 - 20.0;
};
//使用纹理TEXTURE0
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, dropTexture);
gl.uniform1i(shaderProgram.samplerUniform, 0);
var blending = true;
if (blending) {//使用混合模式
gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
gl.enable(gl.BLEND);
gl.disable(gl.DEPTH_TEST);
gl.uniform1f(shaderProgram.alphaUniform, 1.0);
} else {
gl.disable(gl.BLEND);
gl.enable(gl.DEPTH_TEST);
}
}
//......
}
function initBuffer() {
//......
var latitudeBands = 60;
var longitudeBands = 60;
var radius = 0.5;
//创建随机形状和大小的椭球体，保持总体形状为一个蒜头形
var aRadius = radius * (1.2 + Math.random());
var bRadius = radius * (1.3 + Math.random());
var cRadius = radius * 1.0;
var vertexPositionData = [];
var normalData = [];
var textureCoordData = [];
for (var latNumber = 0; latNumber <= latitudeBands; latNumber++) {
aRadius -= latNumber * radius / 1000;
var theta = latNumber * Math.PI / latitudeBands;
var sinTheta = Math.sin(theta);
var cosTheta = Math.cos(theta);
for (var longNumber = 0; longNumber <= longitudeBands; longNumber++) {
var phi = longNumber * 2 * Math.PI / longitudeBands;
var sinPhi = Math.sin(phi);
var cosPhi = Math.cos(phi);
var x = aRadius * cosPhi * sinTheta;
var y = -(bRadius * cosTheta);
var z = cRadius * sinPhi * sinTheta;
normalData.push(x);
normalData.push(y);
normalData.push(z);
vertexPositionData.push(radius * x);
vertexPositionData.push(radius * y);
vertexPositionData.push(radius * z);
}
}
//......
}

最后我们编写动画程序的主流程，动画我们使用requestAnimationFrame接口：

function main() {
window.scrollTo(0, 0);
var canvas = document.getElementById("container");
initGL(canvas);
initShaders();
initBuffers();
initTexture();
//gl.clearColor(0.0, 0.0, 0.0, 1.0); //clear background
gl.enable(gl.DEPTH_TEST);
requestAnimationFrame(drawScene());
}
window.addEventListener('load', main);

至此，整个下雨的逼真动画已完成。

在线咨询

上一篇：高级前端面试利器：掌握HTML5核心技术，征服面试官
下一篇：34道常见的HTML+CSS面试题（附答案）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS制作下雨动画效果教程，你学会了吗？

前言

动画解析

云

雨滴

阴影

推荐文章

公告

前言

动画解析

云

雨滴

阴影

推荐文章

公告

3D雨滴的绘制原理

生成不规则椭球体

创建透镜效果

随机雨滴的生成和动画

您的项目需求