這篇文章主要介紹CSS怎么實現(xiàn)雨滴動畫效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為膠州等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及膠州網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、膠州網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

玻璃窗

今天我們要實現(xiàn)的是雨滴效果，不過實現(xiàn)雨滴前，我們先把毛玻璃的效果弄出來，沒有玻璃窗，雨都進屋了，還有啥好敲打的。

<div class='window'></div>
.window {
            position: absolute;
            width: 100vw;
            height: 100vh;
            background: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
            background-size: cover;
            background-position: 100%;
            filter: blur(10px);
}

其實就是給一張圖片，做了個模糊化的效果，看起來像毛玻璃的效果

一滴雨

雨滴的效果就很巧妙了，讓我們看下一滴雨完整的效果圖

這滴雨其實分為兩個部分，第一部分是底部的陰影部分，其實是個邊框來的，代碼如下：

.border {
            position: absolute;
            margin-left: 92px;
            margin-top: 51px;
            border-radius: 100%;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
            transform: rotateY(0);
            width: 20px;
            height: 28px;
}

<div class='border'></div>

通過width和height屬性和border-radius把border拉成一個橢圓形，然后用box-shadow把陰影拉出來，作為水滴的陰影，邊框的最終效果如下：

然后是水滴的部分

.raindrop {
            filter: brightness(1.2);
            position: absolute;
            margin-left: 90px;
            margin-top: 50px;
            background-size: 5vw 5vh;
            border-radius: 100%;
            background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
            transform: rotate(180deg) rotateY(0);
            background-position: 48.1994160428% 54.3259834959%;
            width: 24px;
            height: 28px;
}
<div class='raindrop'></div>

• 水滴用background-image設(shè)置了玻璃的圖片作為倒影，倒影之所以是倒影，是因為影子是倒著的，所以用transform的rotate()旋轉(zhuǎn)了圖片180，正好倒過來

• 通過background-position設(shè)置圖片在水滴的顯示的位置，后面不同的水滴會顯示出的倒影因為圖片位置的變化都不同，顯得真實

• raindrop的width比border的width多幾個像素，是為了讓水滴的兩邊蓋住border，只留border的上下顯示陰影

• raindrop的margin-left和margin-top和border的也是略有不同，是為了raindrop能居中覆蓋在border上面，使得水滴和陰影融合的更真實

單獨無陰影的水滴效果如下：

隨機雨滴

雨從來都不是一滴一滴來的，而且也不會很有規(guī)律的來，為了讓雨滴隨機出現(xiàn)在玻璃窗上，css-doodle框架。

<css-doodle use="var(--rule)"></css-doodle>

先創(chuàng)建一個css-doodle的自定義組件

--rule: ( :doodle {
     @grid: 10x10/ 100%;
     overflow: visible;
}

打出10*10個grid，這樣最多可以出現(xiàn)100滴雨

transform: scale(@rand(.5, .9));

通過transform:scale讓雨滴隨機變大變小

:before {
    content: '';
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopb);
    border-radius: 100%;
    box-shadow: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6);
    transform: rotateY(0);
    width: @var(--widthb);
    height: @var(--height);
}

:after {
    content: '';
    filter: brightness(1.2);
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopa);
    background-size: 5vw 5vh;
    border-radius: 100%;
    background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
    transform: rotate(180deg) rotateY(0);
    background-position: @r(1%, 100%) @r(1%, 100%);
    width: @var(--widtha);
    height: @var(--height);
 }

這里的:before和：after大家看的是不是很眼熟，其實:before里面的內(nèi)容就是前面border的樣式，:after里面的就是前面raindrop的樣式。content必須要有，因為在偽元素（before，after）里如果沒有設(shè)置“content”屬性，偽元素是無用的，整個:before和:after里面的配置就都無效了。為了讓雨滴顯得更清晰，加了filter: brightness(1.2)讓雨滴顯得更亮一些。

這里面比較奇怪的是@var()，它其實就是css的變量，在css-doodle做了一層包裝，作用和css的var()是一樣的，我們看下這些變量的定義

--size:(4 + @r(1, 8));
--shadow-size: calc(((@var(--size)*0.3) - 1)*1px);
--mleft:@r(1, 100)px;
--mtop:@r(1, 100);
--mtop1:(@var(--mtop) - 1);
--mtopb:calc(@var(--mtop)*1px);
--mtopa:calc(@var(--mtop1)*1px);
--height:@r(15, 25)px;
--width:@r(8, 20);
--width2:(@var(--width) + 5);
--widthb:calc(@var(--width)*1px);
--widtha:calc(@var(--width2)*1px);

這里有幾個坑要說明一下：

1號坑：css-doodle提供了@calc()，但是這里計算還是要用css的calc()，使用@calc()無效。
2號坑：在使用@var做加減法的時候，+-號的兩遍要有空格，否則計算無效，切記切記。
3號不是坑：計算好數(shù)值后，怎么帶上px單位呢，用calc(value*1px)這種方法就可以了，其他的單位也可以用這種方法。
4號說明：為什么要用變量？是因為before和after不在一起，為了讓boder和raindrop的margin-left、margin-top、width、height等屬性能夠保持一致，就需要用變量在before和after外面定義好，傳值到里面去。

最終的效果如下：

沒動畫效果怎么敲打我窗

雨點如果只是這樣灑在窗戶，那就沒有敲打的意思，為了體現(xiàn)敲打，我決定讓雨點動起來。

:before {
    content: '';
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopb);
    border-radius: 100%;
    box-shadow: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6);
    transform: rotateY(0);
    width: @var(--widthb);
    height: @var(--height);
    opacity: 0;
    animation: raindrop-fall 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    animation-delay: @var(--delay);
}
:after {
    content: '';
    filter: brightness(1.2);
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopa);
    background-size: 5vw 5vh;
    border-radius: 100%;
    background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
    transform: rotate(180deg) rotateY(0);
    background-position: @r(1%, 100%) @r(1%, 100%);
    width: @var(--widtha);
    height: @var(--height);
    opacity: 0;
    animation: raindrop-fall 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    animation-delay: @var(--delay);
}

重點是:before和:after里面的最后三行，是用來實現(xiàn)動畫效果的。

cubic-bezier()控制動畫的速度，使得雨滴落到玻璃窗的效果更逼真

animation-delay 雨點出現(xiàn)的時間隨機，同樣是為了效果更逼真，逼真的效果真麻煩

再來看看raindrop-fall的@keyframe設(shè)置

@keyframes raindrop-fall {
    0% {
        opacity: 0;
        transform: rotate(180deg) scale(2.5, 2.3) rotateY(0);
    }
    100% {
        opacity: 1;
        transform: rotate(180deg) scale(1, 1) rotateY(0);
    }
}

以上是“CSS怎么實現(xiàn)雨滴動畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：CSS怎么實現(xiàn)雨滴動畫效果-創(chuàng)新互聯(lián)
新聞來源：http://aaarwkj.com/article34/cojspe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、營銷型網(wǎng)站建設(shè)、用戶體驗、小程序開發(fā)、網(wǎng)站制作、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)