窓ガラス上の雨滴のリアルな効果を実現する純粋な CSS_JavaScript スキル

ここでは CSS テクノロジーを使用してそのようなシナリオを示しているだけですが、あまり実用的ではないかもしれません。ただし、これは CSS の新しい機能を探索する絶好の機会です。新しい機能やツールを試すことができます。そして徐々に仕事でも実践されていきます。窓の雨粒エフェクトを作成する場合は、HAML と Sass を使用します。

ケース効果

デモを見る

ソースコードのダウンロード

上記の効果を見ると、屋内に立って窓の外の雨の中の夜景を眺めているようなものでしょうか? 窓についた雨粒の効果はとてもリアルですが、窓の外の夜景はとてもぼやけています。 。私たちはもはや詩的なものではなく、そのような効果を達成するためにどのようなテクノロジーが使用されているかに誰もが関心を持っていると思います。

プリプロセッサ

この例では、よく知られた HTML と CSS の代わりに HAML と Sass が使用されています。主な理由は、雨滴を作成するには数百の

要素が必要であり、結局のところ、それぞれの雨滴が異なるように見えるためです。ワークロードを軽減するためにプリプロセッサを使用することに加えて、プリプロセッサでループや変数などを使用することもできます。最も重要なことは、ランダム関数によって生成されたランダム値を使用できるため、数百の雨滴を個別に処理する必要がないことです。

HAML と Sass の構文については、公式 Web サイトを確認してください。ローカル コンピューターにそのような開発環境がない場合は、Codepen で直接デモを作成し、対応するプリプロセッサを選択できます。 HTML と CSS の設定で対応するプリプロセッサを選択します。たとえば、HTML 設定で HAML を選択し、CSS 設定で SCSS を選択します。

Sass に関する中国語チュートリアルをさらに詳しく知りたい場合は、ここをクリックして読むことができます。

構造

窓に雨滴のエフェクトを作成する構造はそれほど複雑ではありません。主に 2 つのレベルに分かれており、1 つは窓、もう 1 つは雨滴です。この場合、ウィンドウを表すために .window が使用され、上記の雨滴は .raindrops コンテナに配置されます。雨滴は .border と .drops によって作成されます。そして、window.window と Raindrops.raindrops の両方をコンテナに配置します。

コンテナ内:

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

コンパイルされた構造:

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

スタイル

スタイルは 3 つのレベルに分かれています:

窓の外のぼやけた夜景（窓の効果とも言えます）
雨粒効果
雨粒のスライドアニメーション効果
次に、これらの効果がどのように実現されるのか、またどのような新しい CSS 機能が使用されているのかを簡単に理解します。

変数を設定する

エフェクト全体は Sass を使用して書かれています。これまで Sass を理解したことがない場合、または Sass に触れたことがない場合は、まず Sass について簡単に理解することをお勧めします。これは、ケースエフェクトの生成をすぐに理解するのに役立ちます。

窓の外の夜景では、ランタンが点灯している写真を見つけたので、ウィンドウを全画面に表示します。ここでは、最初に 3 つの変数を宣言します。

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

さらに、raindrop 変数を設定する必要があります:

$raindrops:120;

雨滴の変数値は HTML の雨滴構造に最もよく一致する必要があることに注意することが重要です。

ウィンドウを全画面に表示します

最初に行うことは、ウィンドウを全画面表示にすることです。実は.windowを全画面表示にするということです。全画面効果を実現する方法については、難しいことではありません。ある程度の CSS を知っている学生には数分で実行できるようにしてもらいたいと考えています。ただし、ここでは CSS3 の新しいメソッドが使用されており、ビューポート ユニットを使用して全画面効果を実現しています。

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

は 2 つの重要な知識ポイントを使用します:

ビューポート単位 vw および vh を使用して、コンテナー .container および .window をビューポート ウィンドウと同じ大きさにします。 (Viewport ユニットの詳細な紹介については、こちらを参照してください)
CSS3のbackground-sizeプロパティを使用して、背景画像を画面いっぱいに表示します。

ぼかし効果（曇りガラス）

私たちが望む効果は、全画面の背景画像のような単純なものではなく、画像上のぼやけた効果です。学生の中には、制作ソフトウェアを使用して背景がぼやけた写真を作成するのに数分しかかからないという人もいるかもしれません。それでもこの方法で対処するのであれば、それはすでにアウトであることを意味します。

CSS3にはfilter属性があり、これをblur()に設定すると効果が現れます。

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