如何使用CSS3/SCSS实现逼真的车窗雨滴效果

techbrood 发表于 2016-05-06 13:13:45

标签: web, html5, css3, scss

- +

在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。

d4ca075023f827d8.png

感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和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脚本。

possitive(16) views8506 comments1

发送私信

最新评论

iefreer 2016-05-06 13:27:34

moved from my csdn blog to techbrood


请先 登录 再评论.
相关文章
  • CentOS6 Apache2.2多站点HTTPS配置

    可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost

  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...

  • Three.js入门教程2 - 着色器(下)

    这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

  • WebGL入门教程6 - 光照效果和Phong光照模型

    正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...

  • Three.js 开发基础知识 - 绘制3D对象

    Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...

  • inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...