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

實(shí)現(xiàn)一個(gè)小雨滴

首先雨滴是一個(gè)個(gè)小的橢圓形元素：

[css] view plain copy

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

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

隨機(jī)雨滴

接著我們要?jiǎng)?chuàng)建一些隨機(jī)分布的雨點(diǎn)對(duì)象，假如只有幾個(gè)，我們可以手動(dòng)編寫CSS代碼，但如果有幾十個(gè)，直接寫CSS代碼的效率和可維護(hù)性就很差了。

我們使用SCSS的random方法，來(lái)隨機(jī)微調(diào)雨點(diǎn)對(duì)象的尺寸和絕對(duì)位置。

[css] view plain copy

1. @for $i from 1 through $raindrops{  
2.   
3.     // 生成0到1之間的隨機(jī)數(shù)  
4.     $x:random();  
5.     $y:random();  
6.   
7.     // 隨機(jī)尺寸和位置  
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. }  

效果增強(qiáng)

我們還可以給雨滴添加一點(diǎn)閃光的視覺效果，通過(guò)CSS3濾鏡來(lái)實(shí)現(xiàn)：

[css] view plain copy

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

在線試試

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

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

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

如何基于Canvas來(lái)模擬真實(shí)雨景

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