CSS pur pour obtenir un effet réaliste des gouttes de pluie sur les compétences glass_javascript des fenêtres

Pour la syntaxe de HAML et Sass, vous pouvez consulter leurs sites officiels. Si votre ordinateur local ne dispose pas d'un tel environnement de développement, vous pouvez créer une DEMO directement dans Codepen et sélectionner le préprocesseur correspondant. Sélectionnez le préprocesseur correspondant dans la configuration de HTML et CSS. Par exemple, sélectionnez HAML dans les paramètres HTML et sélectionnez SCSS dans les paramètres CSS.

Pour plus de tutoriels chinois sur Sass, vous pouvez cliquer ici pour lire.

Structure

La structure permettant de créer l'effet de gouttes de pluie sur la fenêtre n'est pas trop compliquée. Il est principalement divisé en deux niveaux, l'un est la fenêtre et l'autre les gouttes de pluie. Dans le cas, .window est utilisé pour représenter la fenêtre, et les gouttes de pluie ci-dessus sont placées dans le conteneur .raindrops. Les gouttes de pluie sont créées via .border et .drops. Et placez window.window et raindrops.raindrops dans le conteneur.

En contenant :

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

Structure compilée :

<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

Les styles sont divisés en trois niveaux :

Scène nocturne floue à l'extérieur de la fenêtre (cela peut aussi être compris comme l'effet d'une fenêtre)
Effet goutte de pluie
Effet d'animation coulissante goutte de pluie
Ensuite, comprenez brièvement comment ces effets sont obtenus et quelles nouvelles fonctionnalités CSS sont utilisées.

Définir les variables

L'effet entier est écrit en utilisant Sass. Si vous n'avez jamais compris ou été exposé à Sass, il est recommandé d'en avoir d'abord une brève compréhension. Cela vous aidera à comprendre rapidement la production d’effets de cas.

Pour la scène nocturne à l'extérieur de la fenêtre, j'ai trouvé une image des lanternes qui s'allument, et j'ai laissé la fenêtre occuper tout l'écran. Ici, nous déclarons d'abord trois variables :

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

De plus, vous devez définir la variable goutte de pluie :

$raindrops:120;

Il est important de noter que la valeur variable de la goutte de pluie doit correspondre au mieux à la structure de la goutte de pluie en HTML.

Faire en sorte que la fenêtre occupe le plein écran

La première chose à faire est de faire en sorte que la fenêtre occupe tout l'écran. En fait, cela signifie faire en sorte que .window s'affiche en plein écran. Quant à savoir comment obtenir l’effet plein écran, ce n’est pas difficile. Je veux que les étudiants qui connaissent un peu CSS soient capables de le faire en quelques minutes. Cependant, la nouvelle méthode CSS3 est utilisée ici, en utilisant l'unité de fenêtre pour obtenir l'effet plein écran :

.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%;
}

utilise deux points de connaissances clés :

Utilisez les unités de fenêtre vw et vh pour rendre le conteneur .container et .window aussi grand que la fenêtre d'affichage. (Pour une introduction détaillée à l'unité Viewport, voici une introduction détaillée)
Utilisez la propriété background-size de CSS3 pour que l'image d'arrière-plan remplisse l'écran.

Effet flou (verre dépoli)

L'effet que nous souhaitons n'est pas aussi simple qu'une image d'arrière-plan en plein écran, mais un effet flou sur l'image. Certains étudiants diront peut-être que l’utilisation d’un logiciel de production pour créer une image floue ne prend que quelques minutes. Si vous utilisez toujours cette méthode pour y faire face, cela signifie que vous êtes déjà éliminé.

Il existe un attribut de filtre dans CSS3, définissez-le sur flou() et l'effet apparaîtra.

.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实现窗户玻璃雨滴逼真效果，内容到此为止，希望大家喜欢。