css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧
写样式,毕竟每个雨滴都长得不一致嘛。使用预处理器除了可以帮助我们减少工作量之外,还可以使用预处理器中的循环、变量等。最主要的是可以使用随机函数产生的随机值,让我们不需要单独处理上百个雨滴。
有关于HAML和Sass的语法可以各自到其官网上查阅。如果你自己本地电脑不具备这样的开发环境,可以直接在Codepen创建DEMO,并且选择对应的预处理器。在HTML和CSS的配置中选择对应的预处理器。比如在HTML设置中选择HAML,在CSS设置中选择SCSS。
有关于Sass更多的中文教程,可以点击这里阅读。
结构
制作窗户雨滴的效果,其结构并不太复杂。主要分两个层次,其中是窗户,而另个是雨滴。在案例中使用.window来表示窗户,在.raindrops容器中放置了上面个雨滴.雨滴是通过.border和.drops来制作。并且将窗户.window和雨滴.raindrops都放置在容器.
container中:
编译出来的结构:
样式
样式分为三个层次:
模糊的窗外夜景(理解成窗户的效果也可以)
雨滴效果
雨滴下滑动画效果
接下来简单了解这些效果是怎么实现的,又使用了哪些CSS新特性。
设置变量
整个效果都是使用Sass来编写,如果你从未了解或接触过Sass,建议您先对其做一个简单的了解。这样更有助于你快速理解案例效果制作。
窗外的夜景找了一张华灯初上的图片,而且让窗户占据全屏,在这里首先声明三个变量:
初此之外,需要设置雨滴变量:
特别需要注意,雨滴的变量值最好和HTML中的雨滴结构相匹配。
让窗户占据全屏
首先要做的是让窗户占据全屏。其实就是让.window全屏显示。至于如何实现全屏效果,这也不是什么难的事情。我想懂点CSS的同学,分分钟就能搞定。不过这里采用的是CSS3的新方法,采用viewport单位来实现全屏效果:
使用了两个关键知识点:
使用viewport单位vw和vh,让容器.container和.window和视窗窗口一样大。(有关于Viewport单位相关介绍,这里有做详细介绍)
使用CSS3的background-size属性,让背景图片满屏显示。
模糊效果(毛玻璃)
我们要的效果不仅仅是背景图全屏这么简单,看上去图片是模糊的效果。或许有同学会说,使用制作软件整一张模糊的背影图片,也就分分钟的事情。如果你还是使用这样的方法来处理,说明你已经Out了。
CSS3中有一个filter属性,将其设置blur(),效果就出来了。
现实生活中的雨露
在我们继续讨论之前,让我们看看现实生活中雨滴在窗户上的效果:
图片来自:Wikipedia
由于折射,雨滴翻转图像。另外,雨滴形状或多或少有些类似半球体,而且综们看起来有黑色边框。
雨滴
基于我们看到的雨滴效果,让我们来尝试制作一个单独的雨滴效果。
HAML
SCSS
这是很简单的,我做就是使用div.raindrop画了一个椭圆。并且用了当初的背景图进行了填补,并做了一个倒转的效果。
现在,我们要添加一个小边框,让雨滴看起来更像雨点(看起来有立体效果)。
HAML
SCSS
请注意,我们不只是添加了一个边框,我们还对边框进行了挤压,所以看起来雨滴更自然一些。
雨滴看上去OK了,这个时候我们可以添加数以百计的雨滴:
HAML
我们做了120个雨滴。
接下来使用Sass的循环给每个雨滴写样式:
这里采用了Sass的@for循环对每个雨滴做样式处理,并且使用随机函数random()产生随机值,让每个雨滴的大小,挤压都不一致。同时还使用percentage()函数,让雨滴的背景图采用不同的位置。
上面看到的效果都是静态的,为了让它更具下雨的效果。雨滴滴下的效果,可以使用CSS3的animation来制作动画效果。
定义好falling动画之后,只需要在雨滴上调用:
到了这一步,你也就能看到文章开头显示的雨滴窗户的效果了。是不是感觉很爽呀。
总结
文章一步一步演示了如何使用CSS新特性制作一个华灯初上,雨滴窗户的效果。整个实现过程采用了预处理器来编写代码。从整个过程中你可以很明显的感知,如果没有HAML和Sass这样的预处理器,你要为数以百计的雨滴写样式效果,那绝对是一件非常苦逼的事情。而使用之后,采用他们的功能特性,配合CSS3的一些新特性就能很轻松的完成。
浏览这个效果建议您使用Chrome浏览器浏览,因为这里使用了CSS3一些新特性,大家应该都懂的。千万别问我IE6浏览器怎么破,我也破不了。
纯css实现窗户玻璃雨滴逼真效果,内容到此为止,希望大家喜欢。
css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧相关推荐
- html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css动画怎么暂停,纯CSS方式实现CSS动画的暂停与播放!
使用纯 CSS 的方法,能否暂停.播放 CSS 动画?看起来不可能,至少很麻烦. 我们知道,在 CSS3 animation 中,有这样一个属性可以暂停.播放动画: { animation-play- ...
- [css] 能不能使用纯css使你的浏览器卡死?怎么实现?
[css] 能不能使用纯css使你的浏览器卡死?怎么实现? 可以,用计算属性calc,变量 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与 ...
- css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果
css实现窗户上水珠效果,效果特别逼真,窗外的雨淅淅沥沥飘打在玻璃上,看起来很像模糊的窗外,斜滴的雨露,接下来给大家一起来用CSS技术实现这样一幅画面,下面 这里仅是用CSS技术来演示这样的一个场景, ...
- css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果.pdf
纯纯css实实现现窗窗户户玻玻璃璃雨雨滴滴逼逼真真效效果果 这里仅是用CSS技术来演示这样的一个场景,可 并不太实用.然而这是一个探索CSS新功 的最佳机会.可以让你尝试使用一 些新特性和新工具.并且 ...
- html中擦窗效果,纯CSS写的小雨打在窗户上效果
华灯初上,窗外的雨淅淅沥沥飘打在窗户的玻璃之上.站在室内的你,望着雨中的夜色,是不是让你增添几分惆帐.似乎如此的场景只有在诗中才会出现.那么今天我们一起来用CSS技术来描绘这样的一个场景. 这里仅是用 ...
- html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言 如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理 在按钮中放置一个默认隐藏径向渐变的 ...
- css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果 转自:掘金 - alphardex 前言 切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...
最新文章
- zcmu-2116一元三次方程求解
- Java代码写好后怎么运行?
- 【数据库系统】为什么使用SQL而非C/C++的函数库执行数据库查询操作
- HTML中用弹性布局设置位置,HTML的flex弹性布局
- 计算机类型应用性能,[计算机组成原理]计算机系统性能评价
- 基于AWS的云备份容灾解决方案
- [转载] 玩转python中with的使用与上下文管理器
- Runtime.exec使用错误导致延迟.md
- 802.11ax速览
- 急需能临时发邮件的临时邮箱 临时邮箱怎么注册 邮箱163注册入口在哪
- Linux问题_02:tar: 它似乎不像是一个 tar 归档文件
- 遗传算法 神经网络 深度学习 概率论 模糊数学 之间有什么区别?
- 计算机右键菜单更换顺序,电脑图标排列顺序怎么自己改变了
- 【Golang】欲入此Go先看Go的基本语法
- Blender 2.9
- 球差透射电镜测试样品的优势有哪些?
- linux修改用户名、密码、组名等详细步骤
- 离散数学-<集合论与图论>思维导图
- 可控硅原理(单向可控硅和双向可控硅)
- 晓前端·周刊【第7期】:信息的不对称与真实性(上)