Reines CSS, um einen realistischen Effekt von Regentropfen auf Fensterglas-Javascript-Fähigkeiten zu erzielen

Informationen zur Syntax von HAML und Sass finden Sie auf deren offiziellen Websites. Sollte Ihr lokaler Rechner nicht über eine solche Entwicklungsumgebung verfügen, können Sie direkt in Codepen eine DEMO erstellen und den entsprechenden Präprozessor auswählen. Wählen Sie in der Konfiguration von HTML und CSS den entsprechenden Präprozessor aus. Wählen Sie beispielsweise HAML in den HTML-Einstellungen und SCSS in den CSS-Einstellungen aus.

Weitere chinesische Tutorials zu Sass finden Sie hier, um sie zu lesen.

Struktur

Die Struktur zur Erzeugung des Regentropfeneffekts auf dem Fenster ist nicht allzu kompliziert. Es ist hauptsächlich in zwei Ebenen unterteilt, eine ist das Fenster und die andere ist die Regentropfen. In diesem Fall wird .window zur Darstellung des Fensters verwendet und die oben genannten Regentropfen werden im .raindrops-Container platziert. Die Regentropfen werden über .border und .drops erzeugt. Und legen Sie sowohl window.window als auch raindrops.raindrops in den Behälter.

Im Container:

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

Kompilierte Struktur:

<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>

Stil

Stile sind in drei Ebenen unterteilt:

Verschwommene Nachtszene außerhalb des Fensters (kann auch als Fenstereffekt verstanden werden)
Regentropfeneffekt
Regentropfen-Gleitanimationseffekt
Als Nächstes verstehen Sie kurz, wie diese Effekte erzielt werden und welche neuen CSS-Funktionen verwendet werden.

Variablen festlegen

Der gesamte Effekt wurde mit Sass geschrieben. Wenn Sie Sass noch nie verstanden haben oder damit in Kontakt gekommen sind, wird empfohlen, dass Sie sich zunächst kurz damit vertraut machen. Dies wird Ihnen helfen, die Entstehung von Falleffekten schnell zu verstehen.

Für die Nachtszene außerhalb des Fensters habe ich ein Bild der aufleuchtenden Laternen gefunden und das Fenster den gesamten Bildschirm einnehmen lassen. Hier deklarieren wir zunächst drei Variablen:

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

Zusätzlich müssen Sie die Variable „Regentropfen“ festlegen:

$raindrops:120;

Es ist wichtig zu beachten, dass der Variablenwert des Regentropfens am besten mit der Regentropfenstruktur in HTML übereinstimmen sollte.

Stellen Sie sicher, dass das Fenster den gesamten Bildschirm einnimmt

Als Erstes muss das Fenster den gesamten Bildschirm einnehmen. Tatsächlich bedeutet es, dass .window im Vollbildmodus angezeigt wird. Es ist nicht schwierig, den Vollbildeffekt zu erzielen. Ich möchte, dass Studierende, die sich mit CSS auskennen, es in wenigen Minuten erledigen können. Allerdings wird hier die neue Methode von CSS3 verwendet, die die Viewport-Einheit verwendet, um den Vollbildeffekt zu erzielen:

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

verwendet zwei wichtige Wissenspunkte:

Verwenden Sie die Viewport-Einheiten vw und vh, um die Container .container und .window so groß wie das Viewport-Fenster zu machen. (Eine ausführliche Einführung in die Viewport-Einheit finden Sie hier)
Verwenden Sie die Eigenschaft „background-size“ von CSS3, damit das Hintergrundbild den Bildschirm ausfüllt.

Unschärfeeffekt (Milchglas)

Der gewünschte Effekt ist nicht nur ein einfaches Hintergrundbild im Vollbildmodus, sondern ein Unschärfeeffekt auf dem Bild. Einige Studenten sagen vielleicht, dass die Verwendung einer Produktionssoftware zum Erstellen eines unscharfen Rückbilds nur wenige Minuten dauert. Wenn Sie immer noch diese Methode verwenden, um damit umzugehen, bedeutet das, dass Sie bereits draußen sind.

Es gibt ein Filterattribut in CSS3. Setzen Sie es auf „blur()“ und der Effekt wird angezeigt.

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