纯css实现窗户玻璃雨滴逼真效果资源-CSDN下载

css样式

2 浏览量 2021-01-19 15:23:00 上传评论收藏 418KB PDF 举报

资源推荐

资源详情

资源评论

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

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

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

}

剩余6页未读，继续阅读

评论收藏

内容反馈

weixin_38719564

粉丝: 2

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

窗户玻璃雨滴效果

逼真的玻璃雨滴效果插件rainyday.js

HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果

实现个人主页的动态雨滴玻璃效果的HTML源码

纯CSS实现的卡片切换效果.rar

【css酷炫效果】纯CSS实现动态雨滴效果

【css酷炫效果】纯CSS实现毛玻璃效果

前端纯css实现动态雪花效果

纯css实现的20种loading效果

CSS3实现的模拟透过脏玻璃窗户看室外景色远近景交替动画效果源码.zip

纯CSS控制实现下拉菜单效果-核心代码.html

两款纯css3实现的动画菜单.zip

纯css3绘制超逼真iPhone6动画效果

纯css实现的凹槽底部导航菜单，CSS凹型导航按钮效果的实现效果，适用于html5，小程序，uniapp，Vue，nvue等

纯CSS3实现逼真的翻书效果.zip

js效果：CSS实现超级炫酷的流光按钮效果；在网页中实现文字的一个一个出现

网页动画素材 纯css3绘制逼真神奇宝贝伊布动画（抖音资料）

利用 CSS 实现漂亮的毛玻璃效果

基于CSS实现的图片玻璃光影效果

纯CSS实现图片美化带边框3D效果鼠标经过旋转堆叠特效动画.zip

纯css实现table滚动条(纯css实现div滚动条)

用纯css代码实现的图标集没有任何依赖

纯css实现28种加载loading动态效果

纯CSS实现语音动画.docx

纯CSS3实现的玻璃壶倒咖啡动画效果源码.zip

【css酷炫效果】纯CSS实现球上下浮动填充效果

【css酷炫效果】纯CSS实现科技感网格背景

纯css实现动态大象效果

纯css3实现的折角效果

前端面试题总结----

APP-AR-96282:错误:The p_customer_trx_id is required, currently it is passed as null.

最新资源

网页动画素材纯css3绘制逼真神奇宝贝伊布动画（抖音资料）