Css tulen untuk mencapai kesan realistik titisan hujan pada kemahiran window glass_javascript

Untuk sintaks HAML dan Sass, anda boleh menyemak tapak web rasmi mereka. Jika komputer tempatan anda tidak mempunyai persekitaran pembangunan sedemikian, anda boleh membuat DEMO terus dalam Codepen dan pilih prapemproses yang sepadan. Pilih prapemproses yang sepadan dalam konfigurasi HTML dan CSS. Contohnya, pilih HAML dalam tetapan HTML dan pilih SCSS dalam tetapan CSS.

Untuk lebih banyak tutorial bahasa Cina tentang Sass, anda boleh klik di sini untuk membaca.

Struktur

Struktur mencipta kesan titisan hujan pada tingkap tidak terlalu rumit. Ia terutamanya dibahagikan kepada dua peringkat, satu adalah tingkap dan satu lagi adalah titisan hujan. Dalam kes ini, .window digunakan untuk mewakili tingkap, dan titisan hujan di atas diletakkan dalam bekas . titisan hujan Titisan hujan dibuat melalui .sempadan dan .titis. Dan letakkan kedua-dua tingkap.tingkap dan titisan hujan.titisan hujan di dalam bekas.

Dalam bekas:

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

Struktur tersusun:

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

Gaya

Gaya dibahagikan kepada tiga peringkat:

Adegan malam kabur di luar tingkap (ia juga boleh difahami sebagai kesan tingkap)
Kesan titisan hujan
Kesan animasi gelongsor titisan hujan
Seterusnya, fahami secara ringkas cara kesan ini dicapai dan ciri CSS baharu yang digunakan.

Tetapkan pembolehubah

Kesan keseluruhan ditulis menggunakan Sass Jika anda tidak pernah memahami atau terdedah kepada Sass, anda disyorkan untuk memahaminya secara ringkas. Ini akan membantu anda memahami dengan cepat pengeluaran kesan kes.

Untuk pemandangan malam di luar tingkap, saya dapati gambar tanglung menyala, dan biarkan tingkap menduduki skrin penuh Di sini kita mula-mula mengisytiharkan tiga pembolehubah:

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

Selain itu, anda perlu menetapkan pembolehubah titisan hujan:

$raindrops:120;

Adalah penting untuk ambil perhatian bahawa nilai pembolehubah titisan hujan harus sepadan dengan struktur titisan hujan dalam HTML.

Jadikan tetingkap memenuhi skrin penuh

Perkara pertama yang perlu dilakukan ialah menjadikan tetingkap mengambil skrin penuh. Malah, ia bermaksud untuk membuat paparan .window dalam skrin penuh. Bagi bagaimana untuk mencapai kesan skrin penuh, ia tidak sukar. Saya mahu pelajar yang mengetahui beberapa CSS dapat melakukannya dalam beberapa minit. Walau bagaimanapun, kaedah baharu CSS3 digunakan di sini, menggunakan unit port pandangan untuk mencapai kesan skrin penuh:

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

menggunakan dua mata pengetahuan utama:

Gunakan unit viewport vw dan vh untuk menjadikan bekas .container dan .window sebesar tetingkap viewport. (Untuk pengenalan terperinci kepada unit Viewport, berikut ialah pengenalan terperinci)
Gunakan sifat bersaiz latar belakang CSS3 untuk menjadikan imej latar belakang memenuhi skrin.

Kesan kabur (kaca beku)

Kesan yang kami inginkan bukan hanya semudah imej latar belakang skrin penuh, tetapi kesan kabur pada imej. Sesetengah pelajar mungkin mengatakan bahawa menggunakan perisian pengeluaran untuk mencipta gambar belakang yang kabur hanya mengambil masa beberapa minit. Jika anda masih menggunakan kaedah ini untuk menanganinya, bermakna anda sudah Keluar.

Terdapat atribut penapis dalam CSS3, tetapkannya kepada blur(), dan kesannya akan muncul.

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