Pure css to achieve realistic effect of raindrops on window glass_javascript skills

Here is just using CSS technology to demonstrate such a scenario, which may not be very practical. However, this is a great opportunity to explore new features of CSS. Allows you to try out new features and tools. And gradually it will be practiced at work. When making the window raindrop effect, HAML and Sass will be used.

Case Effect

View Demo

Source code download

Looking at the above effect, is it a bit like standing indoors and looking at the night scene in the rain outside the window? The effect of raindrops on the window is so real, but the night scene outside the window is so blurry. We are no longer poetic. I think everyone is more concerned about what kind of technology is used to achieve such an effect.

Preprocessor

In this example, HAML and Sass are used instead of the familiar HTML and CSS. The main reason is that hundreds of dc6dce4a544fdca2df29d5ac0ea9906b elements are needed to make raindrops, and hundreds of dc6dce4a544fdca2df29d5ac0ea9906b need to be written in styles. After all, each raindrop looks different. In addition to using the preprocessor to help us reduce the workload, we can also use loops, variables, etc. in the preprocessor. The most important thing is that we can use the random values ​​generated by the random function, so that we do not need to deal with hundreds of raindrops individually.

For the syntax of HAML and Sass, you can check their official websites. If your local computer does not have such a development environment, you can create a DEMO directly in Codepen and select the corresponding preprocessor. Select the corresponding preprocessor in the configuration of HTML and CSS. For example, select HAML in the HTML settings and select SCSS in the CSS settings.

For more Chinese tutorials about Sass, you can click here to read.

Structure

The structure of creating the effect of raindrops on the window is not too complicated. It is mainly divided into two levels, one is the window and the other is the raindrops. In the case, .window is used to represent the window, and the above raindrops are placed in the .raindrops container. The raindrops are made through .border and .drops. And place both window.window and raindrops.raindrops in the container.

In container:

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

Compiled structure:

<div class="container">
 <div class="window"></div>
 <div class="raindrops">
 <div class="borders">
  <div class="border"></div>
  <!-- 此处省略 118个border -->
  <div class="border"></div>
 </div>
 <div class="drops">
  <div class="raindrop"></div>
  <!-- 此处省略 118个raindrop -->
  <div class="raindrop"></div>
 </div>
 </div>
</div>

Style

Styles are divided into three levels:

Blurred night scene outside the window (it can also be understood as the effect of a window)
Raindrop effect
Raindrop sliding animation effect
Next, briefly understand how these effects are achieved and what new CSS features are used.

Set variables

The entire effect is written using Sass. If you have never understood or been exposed to Sass, it is recommended that you have a brief understanding of it first. This will help you quickly understand the case effect production.

For the night scene outside the window, I found a picture of the lanterns coming on, and let the window occupy the full screen. Here we first declare three variables:

$image: "http://www.w3cplus.com/sites/default/files/blogs/2015/1506/huadenchushang.jpg";
$width:100vw;
$height:100vh；

In addition, you need to set the raindrop variable:

$raindrops:120;

It is important to note that the variable value of the raindrop should best match the raindrop structure in HTML.

Make the window occupy the full screen

The first thing to do is to make the window take up the full screen. In fact, it means to make .window display in full screen. As for how to achieve the full-screen effect, it is not difficult. I want students who know some CSS to be able to do it in minutes. However, the new method of CSS3 is used here, using the viewport unit to achieve the full-screen effect:

.container{
 position:relative;
 width:$width;
 height:$height;
 overflow:hidden;
}
.window{
 position:absolute;
 width:$width;
 height:$height;
 background:url($image);
 background-size:cover;
 background-position:50%;
}

uses two key knowledge points:

Use the viewport units vw and vh to make the container .container and .window as large as the viewport window. (For a detailed introduction to the Viewport unit, here is a detailed introduction)
Use the background-size property of CSS3 to make the background image fill the screen.

Blur effect (frosted glass)

The effect we want is not just as simple as a full-screen background image, but a blurry effect on the image. Some students may say that using production software to create a blurry back picture only takes a matter of minutes. If you still use this method to deal with it, it means you are already Out.

There is a filter attribute in CSS3, set it to blur(), and the effect will appear.

.window{
 ...
 filter:blur(10px);
}

 

现实生活中的雨露

在我们继续讨论之前，让我们看看现实生活中雨滴在窗户上的效果：

 

图片来自:Wikipedia

由于折射，雨滴翻转图像。另外，雨滴形状或多或少有些类似半球体，而且综们看起来有黑色边框。

雨滴

基于我们看到的雨滴效果，让我们来尝试制作一个单独的雨滴效果。

HAML

.container
 .window
 .raindrop

SCSS

$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画了一个椭圆。并且用了当初的背景图进行了填补，并做了一个倒转的效果。

 

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

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);
}

 

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

雨滴看上去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()函数，让雨滴的背景图采用不同的位置。

 

上面看到的效果都是静态的，为了让它更具下雨的效果。雨滴滴下的效果，可以使用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实现窗户玻璃雨滴逼真效果，内容到此为止，希望大家喜欢。