Pure CSS realizes the _javascript technique of window glass Raindrop's realistic effect

Just using CSS to demonstrate such a scenario may not be practical. However, this is a great opportunity to explore the new features of CSS. Lets you try some new features and new tools. and will gradually practice in the work. In the making window the Raindrop effect will be used to Haml and sass.

Case effect

View Demo

SOURCE download

See the above effect is not a bit like people stand indoors looking out of the window rain in the night, the effect of raindrops on the window is so real, the night window is so blurred. We are not poetic, I think we are more concerned about what kind of technology to achieve such an effect.

Preprocessor

In this example, Haml and sass are used to replace the familiar HTML and CSS. Mainly for the production of raindrops need hundreds of <div> elements, in addition to the hundreds of <div> write style, after all, each raindrop is inconsistent. In addition to helping us reduce workload, using a preprocessor can also use loops, variables, and so on in the preprocessor. The main thing is that random values can be generated using random functions, so that we don't need to handle hundreds of raindrops individually.

The syntax for HAML and sass can be accessed on its official web. If your own local computer does not have such a development environment, you can create the demo directly in Codepen and select the corresponding preprocessor. Select the corresponding preprocessor in the HTML and CSS configuration. For example, select Haml in HTML settings and select Scss in CSS settings.

For more Chinese tutorials on sass, click here to read.

Structure

The effect of making window raindrops is not too complex. It is mainly divided into two levels, one of which is the window and the other is raindrops. Use. window in a case to indicate a window, where a raindrop is placed in the. Raindrops container. Raindrops are made by. Border and drops. and the Windows. window and raindrops. Raindrops are placed in the container.

In container:

. container
 . Window
 . Raindrops
 . Borders
  -(1..120). Each does
  . 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>
  <!--omit 118 border-->
  <div class= "border" ></div>
 </div>
 <div class= "Drops" >
  <div class= "Raindrop" ></div>
  <!--here omit 118 raindrop-->
  <div class= "Raindrop" ></div>
 </div>
 </div>
</div>

Style

The style is divided into three levels:

Blurred window night view (can be understood as the effect of Windows)
Raindrop Effect
Rain Drop animation effect
The next step is to find out how these effects are implemented and what CSS new features are used.

Setting variables

The whole effect is written using sass, and if you have never known or contacted Sass, it is recommended that you first make a simple understanding of it. This will help you to quickly understand the production of case effects.

The night window to find a picture of lights, and let the window occupy full screen, here first declare three variables:

$image: "Http://www.w3cplus.com/sites/default/files/blogs/2015/1506/huadenchushang.jpg";
$width: 100VW;
$height: 100VH;

In addition to this, you need to set the Raindrop variable:

$raindrops: 120;

In particular, it is worth noting that the variable value of raindrops is best matched with the raindrop structure in HTML.

Let the Windows occupy the full screen

The first thing to do is to have the Windows fill the full screen. Actually, let. Window display full screen. As for how to achieve full-screen effect, this is not a difficult thing. I want to know some of the CSS students, minutes can be done. But here is a new method of CSS3, using viewport units to achieve 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%;
}

Two key knowledge points were used:

Use the viewport unit VW and VH to make the container. Container and. Windows are as big as window windows. (have about viewport unit related introduction, here have done detailed introduction)
Use the CSS3 Background-size property to display the background picture full screen.

Blur effect (wool glass)

The effect we want is not only the background image full screen so simple, it appears that the picture is blurry effect. Perhaps some students said that the use of the software to make a vague picture of the back, also minutes of things. If you still use this method to deal with, you are out.

CSS3 has a Filter property, set it blur (), and the effect comes out.

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

The dew in the real life

Before we go any further, let's look at the effect of raindrops on windows in real life:

Photo from: Wikipedia

Because of refraction, raindrops flip the image. In addition, the shape of raindrops is more or less similar to the hemispherical body, and they look like a black border.

Rain

Based on the Raindrop effect we see, let's try to make a separate raindrop effect.

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

This is very simple, I do is to use Div.raindrop to draw an ellipse. and used the original background picture to fill, and did a reverse effect.

Now, we're going to add a small border to make the raindrops look more like raindrops (they seem to have stereo effects).

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

Notice that we're not just adding a border, we're squeezing the border, so it looks like the raindrops are more natural.

Raindrops look OK, and this time we can add hundreds of raindrops:

HAML

. container
 . Window
 . Raindrops
 . Borders
  -(1..120). Each do
  . Border
 . Drops
  -( 1..120). Each does
  . raindrop

We made 120 raindrops.

Next, use the Sass loop to write the style for each raindrop:

@for $i from 1 through $raindrops {
 $x: Random ();
 $y: Random ();
 $drop-width:5px+random (one);
 $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
 }
}

Here uses the Sass @for cycle to do each raindrop the style processing, and uses the random function random () to produce the random value, causes each raindrop the size, the extrusion is inconsistent. The percentage () function is also used to make the background image of the raindrop take a different position.

The effect seen above is static, in order to make it more rain effect. Raindrops drip effect, you can use CSS3 animation to make animation effect.

@keyframes falling {from
 {

 } to
 {
 transform:translatey (500px);
 }
}

Once you have defined the falling animation, just call it on the raindrops:

@for $i from 1 through $raindrops {
 $x: Random ();
 $y: Random ();
 $drop-width:5px+random (one);
 $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;
 }

At this point, you will be able to see the effect of the Raindrop window shown at the beginning of the article. Does it feel good?

Summarize

This step-by-step article demonstrates how to use the new CSS feature to make a lights, rain-window effect. The entire implementation process uses a preprocessor to write code. You can clearly perceive from the whole process that if you don't have a preprocessor like Haml and sass, you have to write style effects for hundreds of raindrops, which is definitely a very hard thing to do. After use, with their functional characteristics, with CSS3 some of the new features can be easily completed.

Browsing this effect suggests that you use the Chrome browser, because it uses some of the new features of CSS3, which we should all understand. Do not ask me IE6 browser How to break, I also can not break.

Pure CSS to achieve the effect of window glass raindrops, the content ends here, I hope you like.