如何使用CSS3/SCSS实现逼真的车窗雨滴效果

在天气预报类的Web移动应用中，常常需要实现屏幕的雨滴效果，表示阴雨天气。在天气预报类的Web移动应用中，常常需要实现屏幕的雨滴效果，表示阴雨天气。

感觉上比较神奇，其实想通了，这个效果的实现只需要一点物理知识和CSS3的简单变换。

实现一个小雨滴

首先雨滴是一个个小的椭圆形元素：

[css] view plain copy

1. .raindrop {  
2.   width: 8px;  
3.   height: 7px;  
4.   border-radius: 100%;    
5. }  

其次雨滴是一个个凸透镜，能折射出远处的景色，远景所处位置远大于2倍焦距，成倒立、缩小的实像。

“倒立”的效果可以通过旋转180°来实现，“缩小”的效果我们这里通过设置背景图片的尺寸来达到（下面把背景图缩小到全屏的5%并居中）。

[css] view plain copy

1. .raindrop {  
2.   position: absolute;  
3.   background-image: url("http://i./xQdYC7x.jpg");  
4.   background-size: 5vw 5vh;  
5.   background-position: 50%;  
6.   transform: rotate(180deg) rotateY(0);  
7. }  

这样我们就得到了一个小雨点。

随机雨滴

接着我们要创建一些随机分布的雨点对象，假如只有几个，我们可以手动编写CSS代码，但如果有几十个，直接写CSS代码的效率和可维护性就很差了。

我们使用SCSS的random方法，来随机微调雨点对象的尺寸和绝对位置。

[css] view plain copy

1. @for $i from 1 through $raindrops{  
2.   
3.     // 生成0到1之间的随机数  
4.     $x:random();  
5.     $y:random();  
6.   
7.     // 随机尺寸和位置  
8.     $drop-width:5px+random(11);  
9.     $drop-stretch:0.7+(random()*0.5);  
10.     $drop-height:$drop-width*$drop-stretch;  
11.     .raindrop:nth-child(#{$i}){  
12.         // multiply the random position value by the container's size  
13.         left:$x * $width;  
14.         top:$y * $height;  
15.         width:$drop-width;  
16.         height:$drop-height;  
17.         background-position:percentage($x) percentage($y);  
18.     }  
19. }  

效果增强

我们还可以给雨滴添加一点闪光的视觉效果，通过CSS3滤镜来实现：

[css] view plain copy

1. .raindrop {  
2.     filter: brightness(1.2);  
3.     -webkit-filter: brightness(1.2);  
4. }  

最后我们还可以给每个雨滴添加边界效果。这里略过不详述。

在线试试

你可以通过踏得网的在线实例自己试试看（编译CSS时需稍等一会儿）。

你还可以基于该作品添加CSS3动画（添加一些@keyframes即可），实现下雨的效果。

但是如果要实现大量雨滴动画，考虑到性能，你应该使用Canvas，并需要处理碰撞检测、雨滴融合，你可以阅读如下文章：

如何基于Canvas来模拟真实雨景

注意：如果离线测试以上代码，请自行添加浏览器前缀或prefixfree脚本。