유리창에 빗방울의 현실적인 효과를 구현하는 순수 CSS_javascript 기술

이러한 시나리오를 보여주기 위해 CSS 기술을 사용하는 것은 그다지 실용적이지 않을 수 있습니다. 그러나 이는 CSS의 새로운 기능을 탐색할 수 있는 좋은 기회입니다. 새로운 기능과 도구를 시험해 볼 수 있습니다. 그리고 점차적으로 직장에서도 실천될 것입니다. 창문 빗방울 효과를 만들 때 HAML과 Sass를 사용합니다.

사례효과

데모 보기

소스코드 다운로드

위 효과를 보면 약간 실내에 서서 비 내리는 창밖의 야경을 보는 느낌이랄까요? . 우리는 더 이상 시적이지 않습니다. 그러한 효과를 얻기 위해 어떤 기술이 사용되는지에 대해 모두가 더 관심을 갖고 있다고 생각합니다.

전처리기

이 예에서는 익숙한 HTML과 CSS 대신 HAML과 Sass가 사용되었습니다. 주된 이유는 빗방울을 만들려면 수백 개의

요소가 필요하며, 결국 각 빗방울은 다르게 보입니다. 전처리기를 사용하여 작업 부하를 줄이는 것 외에도 전처리기에서 루프, 변수 등을 사용할 수도 있습니다. 가장 중요한 점은 랜덤 함수로 생성된 랜덤 값을 사용할 수 있기 때문에 수백 개의 빗방울을 일일이 처리할 필요가 없다는 점입니다.

HAML 및 Sass의 구문은 공식 웹사이트에서 확인할 수 있습니다. 로컬 컴퓨터에 이러한 개발 환경이 없는 경우 Codepen에서 직접 DEMO를 만들고 해당 전처리기를 선택할 수 있습니다. HTML 및 CSS 구성에서 해당 전처리기를 선택합니다. 예를 들어 HTML 설정에서 HAML을 선택하고 CSS 설정에서 SCSS를 선택합니다.

Sass에 대한 더 많은 중국어 튜토리얼을 보려면 여기를 클릭하여 읽어보세요.

구조

창문에 빗방울이 떨어지는 효과를 만들어내는 구조는 그리 복잡하지 않습니다. 주로 두 개의 레벨로 나누어져 있는데, 하나는 창문이고 다른 하나는 빗방울입니다. 이 경우에는 .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>

스타일

스타일은 세 가지 수준으로 구분됩니다.

창밖의 흐릿한 야경(창문의 효과로도 이해 가능)
빗방울 효과
빗방울 슬라이딩 애니메이션 효과
다음으로, 이러한 효과가 어떻게 달성되는지, 그리고 어떤 새로운 CSS 기능이 사용되는지 간략하게 이해하세요.

변수 설정

전체 효과는 Sass를 사용하여 작성되었습니다. Sass를 전혀 이해하지 못했거나 접해 본 적이 없다면 먼저 간략하게 이해하는 것이 좋습니다. 이는 사례 효과 생성을 빠르게 이해하는 데 도움이 됩니다.

창 밖의 야경을 위해 등불이 들어오는 사진을 발견하고, 창이 전체 화면을 차지하도록 합니다. 여기서는 먼저 세 가지 변수를 선언합니다.

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

는 두 가지 핵심 지식 포인트를 사용합니다:

뷰포트 단위 vw 및 vh를 사용하여 컨테이너 .container 및 .window를 뷰포트 창만큼 크게 만듭니다. (뷰포트 유닛에 대한 자세한 소개는 여기에서 자세히 소개합니다)
CSS3의 background-size 속성을 사용하면 배경 이미지가 화면을 가득 채울 수 있습니다.

흐림 효과(반투명 유리)

우리가 원하는 효과는 전체 화면 배경 이미지처럼 단순한 것이 아니라 이미지에 흐릿한 효과를 주는 것입니다. 일부 학생들은 프로덕션 소프트웨어를 사용하여 흐릿한 뒷면 사진을 만드는 데 몇 분 밖에 걸리지 않는다고 말할 수 있습니다. 여전히 이 방법을 사용하여 처리한다면 이는 이미 Out 상태임을 의미합니다.

CSS3에는 필터 속성이 있는데, 그것을 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实现窗户玻璃雨滴逼真效果，内容到此为止，希望大家喜欢。