這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識(shí)，希望對(duì)大家有所幫助
如何實(shí)現(xiàn)一個(gè)雨滴落下效果
前言
下雨天坐在車窗前，看著雨滴順著車窗漸漸落下，這一唯美的場(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啊?? 。有需要源碼的小伙伴可訪問 gitee.com/fcli/rain.g…文章來源：http://www.zghlxwxcb.cn/news/detail-825086.html
本文轉(zhuǎn)載于:
https://juejin.cn/post/7329126541321601034
如果對(duì)您有所幫助，歡迎您點(diǎn)個(gè)關(guān)注，我會(huì)定時(shí)更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進(jìn)步。
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-825086.html
到了這里，關(guān)于記錄--如何實(shí)現(xiàn)一個(gè)雨滴滑落效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
