這里僅是用CSS技術來演示這樣的一個場景，可能并不太實用。然而這是一個探索CSS新功能的最佳機會。可以讓你嘗試使用一些新特性和新工具。并且逐漸將在工作中實踐。在制作窗口雨滴效果，將使用到HAML和Sass。
案例效果
看到上面的效果是不是有點像人站室內看窗外雨中的夜景，窗戶上雨滴的效果是那么的真實，窗外的夜景卻又是那么的模糊。咱們不在詩意化了，我想大家更為關注的是用什么樣的技術來實現這樣的一個效果。
預處理器
在這個示例中，使用了HAML和Sass來替代我們熟悉的HTML和CSS。主要是為了制作雨滴需要上百個<div>元素，另外需要對上百個<div>寫樣式，畢竟每個雨滴都長得不一致嘛。使用預處理器除了可以幫助我們減少工作量之外，還可以使用預處理器中的循環、變量等。最主要的是可以使用隨機函數產生的隨機值，讓我們不需要單獨處理上百個雨滴。
有關于HAML和Sass的語法可以各自到其官網上查閱。如果你自己本地電腦不具備這樣的開發環境，可以直接在Codepen創建DEMO，并且選擇對應的預處理器。在HTML和CSS的配置中選擇對應的預處理器。比如在HTML設置中選擇HAML，在CSS設置中選擇SCSS。
有關于Sass更多的中文教程，可以點擊這里閱讀。
結構
制作窗戶雨滴的效果，其結構并不太復雜。主要分兩個層次，其中是窗戶，而另個是雨滴。在案例中使用.window來表示窗戶，在.raindrops容器中放置了上面個雨滴.雨滴是通過.border和.drops來制作。并且將窗戶.window和雨滴.raindrops都放置在容器.
container中：
.container .window .raindrops .borders - (1..120).each do .border .drops - (1..120).each do .raindrop
編譯出來的結構：
<div class="container"> <div class="window"></div> <div class="raindrops"> <div class="borders"> <div class="border"></div> <!-- 此處省略 118個border --> <div class="border"></div> </div> <div class="drops"> <div class="raindrop"></div> <!-- 此處省略 118個raindrop --> <div class="raindrop"></div> </div> </div></div>
樣式
樣式分為三個層次：
模糊的窗外夜景（理解成窗戶的效果也可以）
雨滴效果
雨滴下滑動畫效果
接下來簡單了解這些效果是怎么實現的，又使用了哪些CSS新特性。
設置變量
整個效果都是使用Sass來編寫，如果你從未了解或接觸過Sass，建議您先對其做一個簡單的了解。這樣更有助于你快速理解案例效果制作。
窗外的夜景找了一張華燈初上的圖片，而且讓窗戶占據全屏，在這里首先聲明三個變量：
$image: "http://www.w3cplus.com/sites/default/files/blogs/2015/1506/huadenchushang.jpg";$width:100vw;$height:100vh；
初此之外，需要設置雨滴變量：
$raindrops:120;
特別需要注意，雨滴的變量值最好和HTML中的雨滴結構相匹配。
讓窗戶占據全屏
首先要做的是讓窗戶占據全屏。其實就是讓.window全屏顯示。至于如何實現全屏效果，這也不是什么難的事情。我想懂點CSS的同學，分分鐘就能搞定。不過這里采用的是CSS3的新方法，采用viewport單位來實現全屏效果：
.container{ position:relative; width:$width; height:$height; overflow:hidden;}.window{ position:absolute; width:$width; height:$height; background:url($image); background-size:cover; background-position:50%;}使用了兩個關鍵知識點：
使用viewport單位vw和vh，讓容器.container和.window和視窗窗口一樣大。(有關于Viewport單位相關介紹，這里有做詳細介紹)
使用CSS3的background-size屬性，讓背景圖片滿屏顯示。
模糊效果（毛玻璃）
我們要的效果不僅僅是背景圖全屏這么簡單，看上去圖片是模糊的效果。或許有同學會說，使用制作軟件整一張模糊的背影圖片，也就分分鐘的事情。如果你還是使用這樣的方法來處理，說明你已經Out了。
CSS3中有一個filter屬性，將其設置blur()，效果就出來了。
.window{ ... filter:blur(10px);}
現實生活中的雨露
在我們繼續討論之前，讓我們看看現實生活中雨滴在窗戶上的效果：
圖片來自:Wikipedia
由于折射，雨滴翻轉圖像。另外，雨滴形狀或多或少有些類似半球體，而且綜們看起來有黑色邊框。
雨滴
基于我們看到的雨滴效果，讓我們來嘗試制作一個單獨的雨滴效果。
HAML
.container .window .raindrop
SCSS
$drop-width:15px;$drop-stretch:1.1;$drop-height:$drop-width*$drop-stretch;.raindrop{ position:absolute; top:$height/2; left:$width/2; width:$drop-width; height:$drop-height; border-radius:100%; background-image:url($image); background-size:$width*0.05 $height*0.05; transform:rotate(180deg);}這是很簡單的，我做就是使用div.raindrop畫了一個橢圓。并且用了當初的背景圖進行了填補，并做了一個倒轉的效果。
現在，我們要添加一個小邊框，讓雨滴看起來更像雨點（看起來有立體效果）。
HAML
.container .window .border .raindrop
SCSS
.border{ position:absolute; top:$height/2; left:$width/2; margin-left:2px; margin-top:1px; width:$drop-width - 4; height:$drop-height; border-radius:100%; box-shadow:0 0 0 2px rgba(0,0,0,0.6);} 
請注意，我們不只是添加了一個邊框，我們還對邊框進行了擠壓，所以看起來雨滴更自然一些。
雨滴看上去OK了，這個時候我們可以添加數以百計的雨滴：
HAML
.container .window .raindrops .borders - (1..120).each do .border .drops - (1..120).each do .raindrop
我們做了120個雨滴。
接下來使用Sass的循環給每個雨滴寫樣式：
@for $i from 1 through $raindrops{ $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}){ left:$x * $width; top:$y * $height; width:$drop-width; height:$drop-height; background-position:percentage($x) percentage($y); } .border:nth-child(#{$i}){ left:$x * $width; top:$y * $height; width:$drop-width - 4; height:$drop-height; }}這里采用了Sass的@for循環對每個雨滴做樣式處理，并且使用隨機函數random()產生隨機值，讓每個雨滴的大小，擠壓都不一致。同時還使用percentage()函數，讓雨滴的背景圖采用不同的位置。
上面看到的效果都是靜態的，為了讓它更具下雨的效果。雨滴滴下的效果，可以使用CSS3的animation來制作動畫效果。
@keyframes falling { from { } to { transform: translateY(500px); }}定義好falling動畫之后，只需要在雨滴上調用：
@for $i from 1 through $raindrops{ $x:random(); $y:random(); $drop-width:5px+random(11); $drop-stretch:0.7+(random()*0.5); $drop-delay: (random()*2.5) + 1; $drop-height:$drop-width*$drop-stretch; .raindrop:nth-child(#{$i}){ left:$x * $width; top:$y * $height; width:$drop-width; height:$drop-height; background-position:percentage($x) percentage($y); animation: #{$drop-delay}s falling 0.3s ease-in infinite; } .border:nth-child(#{$i}){ left:$x * $width; top:$y * $height; width:$drop-width - 4; height:$drop-height; animation: #{$drop-delay}s falling 0.3s ease-in infinite; }}到了這一步，你也就能看到文章開頭顯示的雨滴窗戶的效果了。是不是感覺很爽呀。
總結
文章一步一步演示了如何使用CSS新特性制作一個華燈初上，雨滴窗戶的效果。整個實現過程采用了預處理器來編寫代碼。從整個過程中你可以很明顯的感知，如果沒有HAML和Sass這樣的預處理器，你要為數以百計的雨滴寫樣式效果，那絕對是一件非常苦逼的事情。而使用之后，采用他們的功能特性，配合CSS3的一些新特性就能很輕松的完成。
瀏覽這個效果建議您使用Chrome瀏覽器瀏覽，因為這里使用了CSS3一些新特性，大家應該都懂的。千萬別問我IE6瀏覽器怎么破，我也破不了。
純css實現窗戶玻璃雨滴逼真效果，內容到此為止，希望大家喜歡。
新聞熱點
疑難解答
