記錄--如何實現一個雨滴滑落效果

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

如何實現一個雨滴落下效果

前言

下雨天坐在車窗前，看著雨滴順著車窗漸漸落下，這一唯美的場景，忍不住想記錄下來。最近在糾結電腦壁紙時，無意間看到有類似的場景，可以將自己喜歡的壁紙加上這種效果。作為多年切圖仔，不由地想到了用css動畫應該可以實現這一效果，於是，直接開乾。先上效果圖：

實現思路

定義多個小水滴

首先直接使用absolute定位，只需要億點點時間就能創造出多個分佈於不同位置以及不同大小的水滴。大致代碼如下：

.border {
    position: absolute;
    margin-left: 2px;
    margin-top: 1px;
    border-radius: 100%;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}

 .border:nth-child(1) {
    left: 10.04698vw;
    top: 91.82078vh;
    width: 2px;
    height: 7.15325px;
}

.border:nth-child(2) {
    left: 12.82745vw;
    top: 77.30419vh;
    width: 10px;
    height: 12.27636px;
}

....

最終實現瞭如下效果：

讓水珠動起來

此時就需要用到css的animation動畫效果了，又花費了億點點時間給每個水珠加上下落的動畫效果。

.raindrop:nth-child(1) {
    left: 10.04698vw;
    top: 91.82078vh;
    width: 6px;
    height: 7.15325px;
    background-position: 10.04698% 91.82078%;
    -webkit-animation: 3.10099s falling 0.3s ease-in infinite;
    animation: 3.10099s falling 0.3s ease-in infinite; //動畫時間每個水珠不一樣
}

@keyframes falling {
    to {
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
    }
}

註意，由於每個小水珠距離底部的位置不同，所以下落的動畫時間也要隨著高度的不同動態調整

增加背景模糊

為了模擬玻璃上的效果，我們加上背景圖，並配置一定的模糊效果，此時用到filter: blur(20px);實現高斯模糊效果。

.window {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: url("1.jpg");
    background-size: cover;
    background-position: 50%;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

一頓操作下來，實現的效果如下：

有沒有發下少了點什麼，這個水珠效果也太假了，那麼接下來，我們就去把這個圈做的更像水珠。

製作水珠效果

想象一下，透過水珠看外面會是什麼樣的嗎，背景是不是都會映射在水珠上，並且隨著水珠的移動，會發生不同的折射效果。那麼，我們只用在每個水珠上加上對應背景的高清照，而且給背景加上旋轉的動畫效果，並給它一點點高光，能呈現出立體的感覺出來。直接上代碼：

 .raindrop {
    position: absolute;
    border-radius: 100%;
    background-image: url("1.jpg");
    background-size: 5vw 5vh;
    background-position: 50%;
    -webkit-transform: rotate(180deg) rotateY(0);
    transform: rotate(180deg) rotateY(0);
}

.raindrop:nth-child(1) {
    left: 10.04698vw;
    top: 91.82078vh;
    width: 6px;
    height: 7.15325px;
    background-position: 10.04698% 91.82078%;
    -webkit-animation: 3.10099s falling 0.3s ease-in infinite;
    animation: 3.10099s falling 0.3s ease-in infinite;
}

....

和之前寫水珠一樣，需要造一個同樣的更靈動的水珠伴隨著原來的一起下落，改變每個水珠的background-position 來實現不同的折射效果，filter: brightness(1.2);實現水珠的高光效果。

總結

通過以上一頓操作，最終實現了開頭的效果，其實本文用到的技術和動畫效果並不多，更多的是不停地造小水珠