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

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

这里仅是用CSS技术来演示这样的一个场景，可 并不太实用。然而这是一个探索CSS新功 的最佳机会。可以让你尝试使用一

些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果，将使用到HA ML和Sass 。

案案例例效效果果

查看演示

源码下载

看到上面的效果是不是有点像人站室内看窗外雨中的夜景，窗户上雨滴的效果是那么的真实，窗外的夜景却又是那么的模糊。咱

们不在诗意化了，我想大家更为关注的是用什么样的技术来实现这样的一个效果。

预预处处理理器器

在这个示例中，使用了HA ML和Sass来替代我们熟悉的HT ML和CSS 。主要是为了制作雨滴需要上百个

元素，另外需要对上

百个

写样式，毕竟每个雨滴都长得不一致嘛。使用预处理器除了可以帮助我们减少工作量之外，还可以使用预处理器中的

循环、变量等。最主要的是可以使用随机函数产生的随机值，让我们不需要单独处理上百个雨滴。

有关于HA ML和Sass的语法可以各自到其官网上查阅。如果你自己本地电脑不具备这样的开发环境，可以直接在Codepen创建DE

MO ，并且选择对应的预处理器。在HT ML和CSS的配置中选择对应的预处理器。比如在HT ML设置中选择HA ML，在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

编编译译出出来来的的结结构构：：

样样式式

样式分为三个层次：

模糊的窗外夜景 (理解成窗户的效果也可以)

雨滴效果

雨滴下滑动画效果

接下来简单了解这些效果是怎么实现的，又使用了哪些CSS新特性。

设设置置变变量量

整个效果都是使用Sass来编写，如果你从未了解或接触过Sass，建议您先对其做一个简单的了解。这样更有助于你快速理解案例

效果制作。

窗外的夜景找了一张华灯初上的图片，而且让窗户占据全屏，在这里首先声明三个变量：

image: "/sites/default/files/blogs/2015/1506/huadenchushang.jpg"

;

width:100vw;

height:100vh；

初此之外，需要设置雨滴变量：

raindrops:120;

特别需要注意，雨滴的变量值最好和HT ML中的雨滴结构相匹配。

让让窗窗户户占占据据全全屏屏

首先要做的是让窗户占据全屏。其实就是让.wind