CSS實(shí)現(xiàn)雨滴動(dòng)畫(huà)效果的實(shí)例代碼

2024-07-11 09:00:19

字體：大中小

供稿：網(wǎng)友

玻璃窗

今天我們要實(shí)現(xiàn)的是雨滴效果，不過(guò)實(shí)現(xiàn)雨滴前，我們先把毛玻璃的效果弄出來(lái)，沒(méi)有玻璃窗，雨都進(jì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);}

其實(shí)就是給一張圖片，做了個(gè)模糊化的效果，看起來(lái)像毛玻璃的效果

一滴雨

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

這滴雨其實(shí)分為兩個(gè)部分，第一部分是底部的陰影部分，其實(shí)是個(gè)邊框來(lái)的，代碼如下：

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

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

然后是水滴的部分

.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è)置了玻璃的圖片作為倒影，倒影之所以是倒影，是因?yàn)橛白邮堑怪模杂胻ransform的rotate()旋轉(zhuǎn)了圖片180，正好倒過(guò)來(lái)
通過(guò)background-position設(shè)置圖片在水滴的顯示的位置，后面不同的水滴會(huì)顯示出的倒影因?yàn)閳D片位置的變化都不同，顯得真實(shí)
raindrop的width比border的width多幾個(gè)像素，是為了讓水滴的兩邊蓋住border，只留border的上下顯示陰影
raindrop的margin-left和margin-top和border的也是略有不同，是為了raindrop能居中覆蓋在border上面，使得水滴和陰影融合的更真實(shí)

單獨(dú)無(wú)陰影的水滴效果如下：

隨機(jī)雨滴

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

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

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

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

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

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

通過(guò)transform:scale讓雨滴隨機(jī)變大變小

: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大家看的是不是很眼熟，其實(shí):before里面的內(nèi)容就是前面border的樣式，:after里面的就是前面raindrop的樣式。content必須要有，因?yàn)樵趥卧兀╞efore，after）里如果沒(méi)有設(shè)置“content”屬性，偽元素是無(wú)用的，整個(gè):before和:after里面的配置就都無(wú)效了。為了讓雨滴顯得更清晰，加了filter: brightness(1.2)讓雨滴顯得更亮一些。

這里面比較奇怪的是@var()，它其實(shí)就是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);--width1:(@var(--width) + 5);--widthb:calc(@var(--width)*1px);--widtha:calc(@var(--width1)*1px);

這里有幾個(gè)坑要說(shuō)明一下：

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

最終的效果如下：

沒(méi)動(dòng)畫(huà)效果怎么敲打我窗

雨點(diǎn)如果只是這樣灑在窗戶，那就沒(méi)有敲打的意思，為了體現(xiàn)敲打，我決定讓雨點(diǎn)動(dòng)起來(lái)。

: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);}

重點(diǎn)是:before和:after里面的最后三行，是用來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果的。

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

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

再來(lái)看看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);    }}

總結(jié)

以上所述是小編給大家介紹的CSS實(shí)現(xiàn)雨滴動(dòng)畫(huà)效果的實(shí)例代碼,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

上一篇：運(yùn)用CSS methodologies去實(shí)現(xiàn)模塊化的方法示例

下一篇：css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫(huà)效果