玻璃窗
今天我們要實現的是雨滴效果，不過實現雨滴前，我們先把毛玻璃的效果弄出來，沒有玻璃窗，雨都進屋了，還有啥好敲打的。
<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>
單獨無陰影的水滴效果如下：
隨機雨滴
雨從來都不是一滴一滴來的，而且也不會很有規律的來，為了讓雨滴隨機出現在玻璃窗上，css-doodle框架。
<css-doodle use="var(--rule)"></css-doodle>
先創建一個css-doodle的自定義組件
--rule: ( :doodle { @grid: 10x10/ 100%; overflow: visible;}打出10*10個grid，這樣最多可以出現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里面的內容就是前面border的樣式，:after里面的就是前面raindrop的樣式。content必須要有，因為在偽元素（before，after）里如果沒有設置“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);--width1:(@var(--width) + 5);--widthb:calc(@var(--width)*1px);--widtha:calc(@var(--width1)*1px);
這里有幾個坑要說明一下：
1號坑：css-doodle提供了@calc()，但是這里計算還是要用css的calc()，使用@calc()無效。
2號坑：在使用@var做加減法的時候，+-號的兩遍要有空格，否則計算無效，切記切記。
3號不是坑：計算好數值后，怎么帶上px單位呢，用calc(value*1px)這種方法就可以了，其他的單位也可以用這種方法。
4號說明：為什么要用變量？是因為before和after不在一起，為了讓boder和raindrop的margin-left、margin-top、width、height等屬性能夠保持一致，就需要用變量在before和after外面定義好，傳值到里面去。
最終的效果如下：
沒動畫效果怎么敲打我窗
雨點如果只是這樣灑在窗戶，那就沒有敲打的意思，為了體現敲打，我決定讓雨點動起來。
: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里面的最后三行，是用來實現動畫效果的。
cubic-bezier()控制動畫的速度，使得雨滴落到玻璃窗的效果更逼真
animation-delay 雨點出現的時間隨機，同樣是為了效果更逼真，逼真的效果真麻煩
再來看看raindrop-fall的@keyframe設置
@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實現雨滴動畫效果的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
