如何使用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) views8637 comments1

发送私信

最新评论

iefreer 2016-05-06 13:27:34

moved from my csdn blog to techbrood


请先 登录 再评论.
相关文章
  • 2019年NodeJS框架Koa和Express选型比较

    Koa和Express都是NodeJS的主流应用开发框架。
    Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...

  • 增强现实引擎ARToolKit工作原理简介

    ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;

  • JavaScript事件模型图解

    在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
    event是用户操作网页时发生的交互动作,比如clic...

  • 常见面试题JavaScript闭包(ES5语法)

    JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()

  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范...

  • HTML5动画背后的数学 - 粒子群仿生算法简介

    本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

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

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

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

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

  • 如何实现SVG clipPath自适应被裁剪对象

    CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
    clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...

  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...

  • 如何使用CSS3实现一个3D商品标签

    使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • div 、section 、article的区别和使用场景

    div 、section 、article的区别和使用场景
    主要区别,以及适用场合如下:
    1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...

  • 更多...