在天气预报类的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即可),实现下雨的效果。
但是如果要实现大量雨滴动画,考虑到性能,你应该使用Canvas,并需要处理碰撞检测、雨滴融合,你可以阅读如下文章:
注意:如果离线测试以上代码,请自行添加浏览器前缀或prefixfree脚本。