纯css实现窗户玻璃雨滴逼真效果(2)

$drop-width:15px; $drop-stretch:1.1; $drop-height:$drop-width*$drop-stretch; .raindrop{ position:absolute; top:$height/2; left:$width/2; width:$drop-width; height:$drop-height; border-radius:100%; background-image:url($image); background-size:$width*0.05 $height*0.05; transform:rotate(180deg); }

这是很简单的,我做就是使用div.raindrop画了一个椭圆。并且用了当初的背景图进行了填补,并做了一个倒转的效果。

纯css实现窗户玻璃雨滴逼真效果

现在,我们要添加一个小边框,让雨滴看起来更像雨点(看起来有立体效果)。

HAML

.container .window .border .raindrop

SCSS

.border{ position:absolute; top:$height/2; left:$width/2; margin-left:2px; margin-top:1px; width:$drop-width - 4; height:$drop-height; border-radius:100%; box-shadow:0 0 0 2px rgba(0,0,0,0.6); }

纯css实现窗户玻璃雨滴逼真效果

请注意,我们不只是添加了一个边框,我们还对边框进行了挤压,所以看起来雨滴更自然一些。

雨滴看上去OK了,这个时候我们可以添加数以百计的雨滴:

HAML

.container .window .raindrops .borders - (1..120).each do .border .drops - (1..120).each do .raindrop

我们做了120个雨滴。

接下来使用Sass的循环给每个雨滴写样式:

@for $i from 1 through $raindrops{ $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}){ left:$x * $width; top:$y * $height; width:$drop-width; height:$drop-height; background-position:percentage($x) percentage($y); } .border:nth-child(#{$i}){ left:$x * $width; top:$y * $height; width:$drop-width - 4; height:$drop-height; } }

这里采用了Sass的@for循环对每个雨滴做样式处理,并且使用随机函数random()产生随机值,让每个雨滴的大小,挤压都不一致。同时还使用percentage()函数,让雨滴的背景图采用不同的位置。

纯css实现窗户玻璃雨滴逼真效果

上面看到的效果都是静态的,为了让它更具下雨的效果。雨滴滴下的效果,可以使用CSS3的animation来制作动画效果。

@keyframes falling { from { } to { transform: translateY(500px); } }

定义好falling动画之后,只需要在雨滴上调用:

@for $i from 1 through $raindrops{ $x:random(); $y:random(); $drop-width:5px+random(11); $drop-stretch:0.7+(random()*0.5); $drop-delay: (random()*2.5) + 1; $drop-height:$drop-width*$drop-stretch; .raindrop:nth-child(#{$i}){ left:$x * $width; top:$y * $height; width:$drop-width; height:$drop-height; background-position:percentage($x) percentage($y); animation: #{$drop-delay}s falling 0.3s ease-in infinite; } .border:nth-child(#{$i}){ left:$x * $width; top:$y * $height; width:$drop-width - 4; height:$drop-height; animation: #{$drop-delay}s falling 0.3s ease-in infinite; } }

到了这一步,你也就能看到文章开头显示的雨滴窗户的效果了。是不是感觉很爽呀。

总结

文章一步一步演示了如何使用CSS新特性制作一个华灯初上,雨滴窗户的效果。整个实现过程采用了预处理器来编写代码。从整个过程中你可以很明显的感知,如果没有HAML和Sass这样的预处理器,你要为数以百计的雨滴写样式效果,那绝对是一件非常苦逼的事情。而使用之后,采用他们的功能特性,配合CSS3的一些新特性就能很轻松的完成。

浏览这个效果建议您使用Chrome浏览器浏览,因为这里使用了CSS3一些新特性,大家应该都懂的。千万别问我IE6浏览器怎么破,我也破不了。

纯css实现窗户玻璃雨滴逼真效果,内容到此为止,希望大家喜欢。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggxyy.html