如何使用CSS3/SCSS实现逼真的车窗雨滴效果
在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。
感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。
实现一个小雨滴
首先雨滴是一个个小的椭圆形元素:
.raindrop { width: 8px; height: 7px; border-radius: 100%; }
其次雨滴是一个个凸透镜,能折射出远处的景色,远景所处位置远大于2倍焦距,成倒立、缩小的实像。
“倒立”的效果可以通过旋转180°来实现,“缩小”的效果我们这里通过设置背景图片的尺寸来达到(下面把背景图缩小到全屏的5%并居中)。
.raindrop { position: absolute; background-image: url("http://i.imgur.com/xQdYC7x.jpg"); background-size: 5vw 5vh; background-position: 50%; transform: rotate(180deg) rotateY(0); }
这样我们就得到了一个小雨点。
随机雨滴
接着我们要创建一些随机分布的雨点对象,假如只有几个,我们可以手动编写CSS代码,但如果有几十个,直接写CSS代码的效率和可维护性就很差了。
我们使用SCSS的random方法,来随机微调雨点对象的尺寸和绝对位置。
@for $i from 1 through $raindrops{ // 生成0到1之间的随机数 $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}){ // multiply the random position value by the container's size left:$x * $width; top:$y * $height; width:$drop-width; height:$drop-height; background-position:percentage($x) percentage($y); } }
效果增强
我们还可以给雨滴添加一点闪光的视觉效果,通过CSS3滤镜来实现:
.raindrop { filter: brightness(1.2); -webkit-filter: brightness(1.2); }
最后我们还可以给每个雨滴添加边界效果。这里略过不详述。
在线试试
你可以通过踏得网的在线实例自己试试看(编译CSS时需稍等一会儿)。
你还可以基于该作品添加CSS3动画(添加一些@keyframes即可),实现下雨的效果。
注意:如果离线测试以上代码,请自行添加浏览器前缀或prefixfree脚本。
- 相关文章
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
ARCore基本概念和工作原理简介
谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...
WebVR简介和常用资源链接
什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...
S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...
IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
如何使用CSS3实现一个3D商品标签
使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...
div 、section 、article的区别和使用场景
div 、section 、article的区别和使用场景
主要区别,以及适用场合如下:
1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...