CSS實現雨滴動畫效果的實例代碼

  發布時間:2019-10-08 15:51:04   作者:佚名   我要評論
這篇文章主要介紹了CSS實現雨滴動畫效果的實例代碼,需要的朋友可以參考下

玻璃窗

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

<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設置了玻璃的圖片作為倒影,倒影之所以是倒影,是因為影子是倒著的,所以用transform的rotate()旋轉了圖片180,正好倒過來
  • 通過background-position設置圖片在水滴的顯示的位置,后面不同的水滴會顯示出的倒影因為圖片位置的變化都不同,顯得真實
  • raindrop的width比border的width多幾個像素,是為了讓水滴的兩邊蓋住border,只留border的上下顯示陰影
  • raindrop的margin-left和margin-top和border的也是略有不同,是為了raindrop能居中覆蓋在border上面,使得水滴和陰影融合的更真實

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

隨機雨滴

雨從來都不是一滴一滴來的,而且也不會很有規律的來,為了讓雨滴隨機出現在玻璃窗上,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實現雨滴動畫效果的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • 使用CSS3實現SVG路徑描邊動畫效果入門教程

    不依賴javascript,直接使用純css實現 svg 的描邊繪制動畫效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧
    2019-10-21
  • CSS3 實現footer 固定在底部(無論頁面多高始終在底部)

    這篇文章主要介紹了CSS3 實現footer 固定在底部(無論頁面多高始終在底部)的相關資料,需要的朋友可以參考下
    2019-10-15
  • 用css3實現轉換過渡和動畫效果

    這篇文章主要介紹了用css3實現轉換過渡和動畫效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-10-11
  • CSS實現雨滴動畫效果的實例代碼

    這篇文章主要介紹了CSS實現雨滴動畫效果的實例代碼,需要的朋友可以參考下
    2019-10-08
  • css3 響應式媒體查詢的示例代碼

    這篇文章主要介紹了css3 響應式媒體查詢的示例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-25
  • CSS3動畫之利用requestAnimationFrame觸發重新播放功能

    這篇文章主要介紹了利用requestAnimationFrame重新播放(觸發)CSS3動畫,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-11
  • CSS3 @media的基本用法總結

    這篇文章主要給大家介紹了關于CSS3 @media的基本用法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用CSS3具有一定的參考學習價值,需要的朋友們下面來一起學習學習
    2019-09-10
  • css3 偽類選擇器快速復習小結

    如果說 css 作為前端開發的基本功, 那么 "選擇器" 就是基礎中的基礎,本文介紹了css3 偽類選擇器快速復習,文中通過示例代碼介紹的非常詳細,對大家的學習或者工
    2019-09-10
  • css3進階之less實現星空動畫的示例代碼

    這篇文章主要介紹了css3進階之less實現星空動畫的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一
    2019-09-10
  • CSS3實現類似翻書效果的過渡動畫的示例代碼

    這篇文章主要介紹了CSS3實現類似翻書效果的過渡動畫的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編
    2019-09-06

最新評論

码报108