如何使用CSS3/SCSS實現逼真的車窗雨滴效果

在天氣預報類的Web移動應用中，常常需要實現屏幕的雨滴效果，表示陰雨天氣。

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

實現一個小雨滴

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

.raindrop {
  width: 8px;
  height: 7px;
  border-radius: 100%;  
}

其次雨滴是一個個凸透鏡，能折射出遠處的景色，遠景所處位置遠大於2倍焦距，成倒立、縮小的實像。

“倒立”的效果可以通過旋轉180°來實現，“縮小”的效果我們這裏通過設置背景圖片的尺寸來達到（下面把背景圖縮小到全屏的5%並居中）。

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

這樣我們就得到了一個小雨點。

隨機雨滴

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

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

@for $i from 1 through $raindrops{

    // 生成0到1之間的隨機數
    $x:random();
    $y:random();

    // 隨機尺寸和位置
    $drop-width:5px+random(11);
    $drop-stretch:0.7+(random()*0.5);
    $drop-height:$drop-width*$drop-stretch;
    .raindrop:nth-child(#{$i}){
        // multiply the random position value by the container's size
        left:$x * $width;
        top:$y * $height;
        width:$drop-width;
        height:$drop-height;
        background-position:percentage($x) percentage($y);
    }
}

效果增強

我們還可以給雨滴添加一點閃光的視覺效果，通過CSS3濾鏡來實現：

.raindrop {
    filter: brightness(1.2);
    -webkit-filter: brightness(1.2);
}

最後我們還可以給每個雨滴添加邊界效果。這裏略過不詳述。

在線試試

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

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

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

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

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

by iefreer