纯css实现窗户玻璃雨滴逼真效果

这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。

案例效果

纯css实现窗户玻璃雨滴逼真效果

查看演示 

源码下载

看到上面的效果是不是有点像人站室内看窗外雨中的夜景,窗户上雨滴的效果是那么的真实,窗外的夜景却又是那么的模糊。咱们不在诗意化了,我想大家更为关注的是用什么样的技术来实现这样的一个效果。

预处理器

在这个示例中,使用了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> <div></div> <div> <div> <div></div> <!-- 此处省略 118个border --> <div></div> </div> <div> <div></div> <!-- 此处省略 118个raindrop --> <div></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); }

纯css实现窗户玻璃雨滴逼真效果

现实生活中的雨露

在我们继续讨论之前,让我们看看现实生活中雨滴在窗户上的效果:

纯css实现窗户玻璃雨滴逼真效果

图片来自:Wikipedia

由于折射,雨滴翻转图像。另外,雨滴形状或多或少有些类似半球体,而且综们看起来有黑色边框。

雨滴

基于我们看到的雨滴效果,让我们来尝试制作一个单独的雨滴效果。

HAML

.container .window .raindrop

SCSS

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggxyy.html