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

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

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

前言

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

實(shí)現(xiàn)思路

定義多個(gè)小水滴

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

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

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

讓水珠動(dòng)起來

此時(shí)就需要用到css的animation動(dòng)畫效果了，又花費(fèi)了億點(diǎn)點(diǎn)時(shí)間給每個(gè)水珠加上下落的動(dòng)畫效果。

.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; //動(dòng)畫時(shí)間每個(gè)水珠不一樣
}
@keyframes falling {
    to {
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
    }
}

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

增加背景模糊

為了模擬玻璃上的效果，我們加上背景圖，并配置一定的模糊效果，此時(shí)用到filter: blur(20px);實(shí)現(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);
}

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

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

制作水珠效果

想象一下，透過水珠看外面會(huì)是什么樣的嗎，背景是不是都會(huì)映射在水珠上，并且隨著水珠的移動(dòng)，會(huì)發(fā)生不同的折射效果。那么，我們只用在每個(gè)水珠上加上對(duì)應(yīng)背景的高清照，而且給背景加上旋轉(zhuǎn)的動(dòng)畫效果，并給它一點(diǎn)點(diǎ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;
}
....

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

總結(jié)

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

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

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