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


Posted in Javascript onAugust 23, 2015

这里仅是用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 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);
}

 

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

现实生活中的雨露

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

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

图片来自: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画了一个椭圆。并且用了当初的背景图进行了填补,并做了一个倒转的效果。

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

现在,我们要添加一个小边框,让雨滴看起来更像雨点(看起来有立体效果)。

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);
}

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

请注意,我们不只是添加了一个边框,我们还对边框进行了挤压,所以看起来雨滴更自然一些。

雨滴看上去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()函数,让雨滴的背景图采用不同的位置。

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

上面看到的效果都是静态的,为了让它更具下雨的效果。雨滴滴下的效果,可以使用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实现窗户玻璃雨滴逼真效果,内容到此为止,希望大家喜欢。

Javascript 相关文章推荐
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
Vue响应式原理详解
Apr 18 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 #Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 #Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 #Javascript
微信JSSDK上传图片
Aug 23 #Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 #Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 #Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 #Javascript
You might like
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
php 学习资料零碎东西
2010/12/04 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
py中的目录与文件判别代码
2008/07/16 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
基于python实现高速视频传输程序
2019/05/05 Python
python如何随机生成高强度密码
2020/08/19 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
汉语言文学职业规划
2014/02/14 职场文书
搞笑爱情保证书
2014/04/29 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
西柏坡观后感
2015/06/08 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
同学聚会祝酒词
2015/08/10 职场文书
五一放假通知怎么写
2015/08/18 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
党员干部学习心得体会
2016/01/23 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书