感覺上比較神奇，其實想通了，這個效果的實現(xiàn)只需要一點物理知識和CSS3的簡單變換。

實現(xiàn)一個小雨滴

首先雨滴是一個個小的橢圓形元素：

[css] view plain copy

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

“倒立”的效果可以通過旋轉(zhuǎn)180°來實現(xiàn)，“縮小”的效果我們這里通過設(shè)置背景圖片的尺寸來達到（下面把背景圖縮小到全屏的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. }  

隨機雨滴

接著我們要創(chuàng)建一些隨機分布的雨點對象，假如只有幾個，我們可以手動編寫CSS代碼，但如果有幾十個，直接寫CSS代碼的效率和可維護性就很差了。

我們使用SCSS的random方法，來隨機微調(diào)雨點對象的尺寸和絕對位置。

[css] view plain copy

1. @for $i from 1 through $raindrops{  
2.   
3.     // 生成0到1之間的隨機數(shù)  
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濾鏡來實現(xiàn)：

[css] view plain copy

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

在線試試

你可以通過踏得網(wǎng)的在線實例自己試試看（編譯CSS時需稍等一會兒）。

你還可以基于該作品添加CSS3動畫（添加一些@keyframes即可），實現(xiàn)下雨的效果。

但是如果要實現(xiàn)大量雨滴動畫，考慮到性能，你應(yīng)該使用Canvas，并需要處理碰撞檢測、雨滴融合，你可以閱讀如下文章：

如何基于Canvas來模擬真實雨景

注意：如果離線測試以上代碼，請自行添加瀏覽器前綴或prefixfree腳本。