首頁  >  文章  >  web前端  >  純css實現窗戶玻璃雨滴逼真效果_javascript技巧

純css實現窗戶玻璃雨滴逼真效果_javascript技巧

WBOY
WBOY原創
2016-05-16 15:43:332317瀏覽

這裡僅是用CSS技術來示範這樣的一個場景,可能不太實用。然而這是一個探索CSS新功能的最佳機會。可以讓你嘗試使用一些新功能和新工具。並且逐漸將在工作中實踐。在製作視窗雨滴效果,將使用到HAML和Sass。

個案效果

看示範 

原始碼下載

看到上面的效果是不是有點像人站室內看窗外雨中的夜景,窗戶上雨滴的效果是那麼的真實,窗外的夜景卻又是那麼的模糊。咱們不在詩意化了,我想大家更為關注的是用什麼樣的技術來實現這樣的一個效果。

預處理器

在這個範例中,使用了HAML和Sass來取代我們熟悉的HTML和CSS。主要是為了製作雨滴需要上百個

元素,另外需要對上百個
寫樣式,畢竟每個雨滴都長得不一致嘛。使用預處理器除了可以幫助我們減少工作量之外,還可以使用預處理器中的迴圈、變數等。最主要的是可以使用隨機函數產生的隨機值,讓我們不需要單獨處理上百個雨滴。

有關於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实现窗户玻璃雨滴逼真效果,内容到此为止,希望大家喜欢。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn