如何使用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脚本。
- 相关文章
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
踏得网精选2016年度10大最佳HTML5动画
踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...
如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...使用HTML5 Canvas实现的界面元素截屏功能
HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
HTTP/2背景和新特性简介
HTTP1.1协议现状、问题和解决方案
HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...
学习使用CSS制作进度条
进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce... 更多...