使用CSS實現(xiàn)一個雨滴滑落效果

發(fā)布時間：2024-02-02 14:13:53 作者：佚名

這篇文章主要為大家詳細介紹了如何使用CSS實現(xiàn)一個雨滴滑落效果，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

前言

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

實現(xiàn)思路

定義多個小水滴

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

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

最終實現(xiàn)了如下效果：

讓水珠動起來

此時就需要用到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);
    }
}

注意，由于每個小水珠距離底部的位置不同，所以下落的動畫時間也要隨著高度的不同動態(tài)調(diào)整

增加背景模糊

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

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

一頓操作下來，實現(xiàn)的效果如下：

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

制作水珠效果

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

 .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 來實現(xiàn)不同的折射效果，filter: brightness(1.2);實現(xiàn)水珠的高光效果。

總結(jié)

通過以上一頓操作，最終實現(xiàn)了開頭的效果，其實本文用到的技術(shù)和動畫效果并不多，更多的是不停地造小水珠??。我如愿地將自己喜歡的壁紙加上了這個動畫效果，當然剛看到這個效果我也沒有想到通過css也能如此輕松的實現(xiàn)，更多炫酷的css效果我再去研究研究，分享給各位看官，前端的盡頭是css啊?? 。

源碼地址：https://gitee.com/fcli/rain.git

以上就是CSS實現(xiàn)一個雨滴滑落效果的詳細內(nèi)容，更多關(guān)于CSS實現(xiàn)雨滴滑落的資料請關(guān)注腳本之家其它相關(guān)文章！