html5+canvas雨滴附在窗戶效果插件-rainyday.js

注本頭條號，專注做前端

今天要來分享的是一款原生JS插件（因為有粉絲提到要多分享一些原生JS），所以今天分享的這塊不依賴jquery，原生JS ，采用html5+canvas實現

它模擬了霧氣在玻璃上凝結，玻璃模糊，并且水滴慢慢滑落的效果，及其逼真

ynamics.js是設計基于物理規律的動畫的重要JavaScript庫。它可以賦予生命給所有包含CSS 和SVG屬性的DOM（文本對象模型）元素，換句話說，Dynamics.js適用于所有JavaScript對象以及一系列其它的元素。目前，Dynamics.js常被用于設計交互式菜單欄、同步下拉菜單、加載器、按鈕以及其它功能。這個庫提供了可定制動畫類型的各種基本選項，如頻率、反彈力、旋轉、摩擦、持續時間等等。

Cta.js 是用于在網頁上創建動畫元素“Action-to-Effect”路徑的輕量級庫。它常被用在tile-based應用程序的導航、模態窗口的打開、側邊欄上可點擊的按鈕等等。

Beep.js是一個通過使用WebAudio API創建基于網頁的電子合成器的JavaScript庫。它可以用于創建音樂或者設計和音樂相關的學習教程。

Rainyday.js是一個使用HTML5 canvas創建雨滴落在玻璃表面的出色效果的強大JavaScript庫。它擁有一個集成了各種可自定義實現的動畫組件的可擴展應用程序接口。

Iconate.js是一個可將設計圖標轉化為流行動畫元素的偉大資源。它擁有大量可供選擇的字體、字形圖標以及自定義圖標集。

Dom-Animator.js是一個在DOM（文本對象模型）中可顯示內容節點里ASCII動畫的JavaScript庫。

Famous 是用于設計流行動畫的強大JavaScript庫，它包含的基于事件的系統（event-based system）使得渲染平滑動畫和過渡特效這類的更新轉換工作變得非常簡單。Famous還有一個可創建自定義動畫和動畫仿真的3D物理引擎，你可以做出包含在不同的重力、拖放和碰撞下的粒子或者3D物體的狀態。

Bounce.js 是一個在CSS 3的支持下能做出各種酷炫動畫的JavaScript庫。你可以設計不同的動畫和運動效果，如自轉、公轉、來回運動、急加速等。

Snabbt.js是一個使用CSS3轉換矩陣的輕量級JavaScript動畫庫。它的結構非常簡單，支持各種過渡和運動效果的應用，如縮放、尺寸調整、扭曲、旋轉等等。Snabbt.js還支持attention animation功能，這個功能在表單驗證方面是非常有用的。

Rekapi是用于CSS動畫關鍵幀動畫以及DOM中JavaScript動畫的高級avaScript庫。在復雜動畫的設計方面，Rekapi以其實用性被人們廣為熟知。您可以使用Rekapi創建生動的餅圖和曲線圖、五彩紙屑、交互性時間線以及各種用戶界面。

本文翻譯自codecondo.com

本站文章除注明轉載外，均為本站原創或翻譯

tml：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>玻璃效果網站</title>
        <link href="../css/20240302.css" rel="stylesheet">
    </head>
    <body>
        <main>
            <section class="glass">
                <div class="dashboard">
                    <div class="user">
                        <img src="./image/20240302/photo1.png" alt="">
                        <h3>
                            Demo
                        </h3>
                        <p>Pro Member</p>
                    </div>
                    <div class="links">
                        <div class="link">
                            <img src="./image/20240302/Streams.png" alt="" />
                            <h2>Streams</h2>
                        </div>
                        <div class="link">
                            <img src="./image/20240302/Games.png" alt="" />
                            <h2>Games</h2>
                        </div>
                        <div class="link">
                            <img src="./image/20240302/news.png" alt="" />
                            <h2>New</h2>
                        </div>
                        <div class="link">
                            <img src="./image/20240302/Library.png" alt="" />
                            <h2>Library</h2>
                        </div>
                    </div>
                    <div class="pro">
                        <h2>Join pro for free games.</h2>
                        <img src="./image/20240302/show_128.png" alt="" />
                    </div>
                </div>
                <div class="games">
                    <div class="status">
                        <h1>Active Games</h1>
                        <input type="text" />
                    </div>
                    <div class="cards">
                        <div class="card">
                            <img src="./image/20240302/20240302_1.png" alt="" />
                            <div class="card-info">
                                <h2>惡 魔 之 魂</h2>
                                <p>PS5 Version</p>
                                <div class="progress"></div>
                            </div>
                            <h2 class="percentage">60%</h2>
                        </div>
                        <div class="card">
                            <img src="./image/20240302/20240302_2.png" alt="" />
                            <div class="card-info">
                                <h2>無 路 之 旅</h2>
                                <p>PS5 Version</p>
                                <div class="progress"></div>
                            </div>
                            <h2 class="percentage">60%</h2>
                        </div>
                        <div class="card">
                            <img src="./image/20240302/20240302_3.png" alt="" />
                            <div class="card-info">
                                <h2>麻布仔大冒險</h2>
                                <p>PS5 Version</p>
                                <div class="progress"></div>
                            </div>
                            <h2 class="percentage">60%</h2>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <div class="circle1"></div>
        <div class="circle2"></div>
    </body>
</html>

Css：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1{
    color: #426696;
    font-weight: 600;
    font-size: 3rem;
    opacity: 0.8;
}

h2, 
p{
    color: #658ec6;
    font-weight: 500;
    opacity: 0.8;
}

h3{
    color: #426696;
    font-weight: 600;
    opacity: 0.8;
}

main {
    font-family: "Poppins", sans-serif;
    min-height: 100vh;
    background: linear-gradient(to right top, #ffcb06, #ec9c07);
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass{
    background: white;
    min-height: 80vh;
    width: 60%;
    background: linear-gradient(
        to right bottom, 
        rgba(255, 255, 255, 0.7), 
        rgba(255, 255, 255, 0.3)
    );
    border-radius: 2rem;
    z-index: 2;
    backdrop-filter: blur(2rem);
    display: flex;
}

.circle1,.circle2{
    background: white;
    background: linear-gradient(
        to right bottom, 
        rgba(255, 255, 255, 0.8), 
        rgba(255, 255, 255, 0.3)
    );
    height: 20rem;
    width: 20rem;
    position: absolute;
    border-radius: 50%;
}

.circle1{
    top: 5%;
    right: 15%;
}

.circle2{
    bottom: 5%;
    left: 10%;
}

.dashboard{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    background: linear-gradient(
        to right bottom, 
        rgba(255, 255, 255, 0.7), 
        rgba(255, 255, 255, 0.3)
    );
    border-radius: 2rem;
}

.link{
    display: flex;
    margin: 2rem 0rem;
    padding: 1rem 5rem;
    align-items: center;
}

.link h2{
    padding: 0rem 1rem;
}

.games{
    flex: 2;
}

.pro{
    background: linear-gradient(to right top, #ffcb06, #ec9c07);
    border-radius: 2rem;
    color: white;
    padding: 1rem;
    position: relative;
}

.pro img{
    position: absolute;
    top: 5%;
    right: 8%;
}

.pro h2{
    width: 40%;
    color: white;
    font-weight: 600;
}

.status{
    margin-bottom: 3rem;

}

.status input{
    background: linear-gradient(
        to right bottom, 
        rgba(255, 255, 255, 0.7), 
        rgba(255, 255, 255, 0.3)
    );
    border: none;
    width: 50%;
    padding: 0.5rem;
    border-radius: 2rem;
}

.games{
    margin: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.card{
    display: flex;
    background: linear-gradient(
        to left top, 
        rgba(255, 255, 255, 0.8), 
        rgba(255, 255, 255, 0.5)
    );
    border-radius: 1rem;
    margin: 2rem 0rem;
    padding: 2rem;
    box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.212);
    justify-content: space-between;
}

.card-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.progress{
    background: linear-gradient(to right top, #ffcb06, #ec9c07);
    width: 100%;
    height: 25%;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

.progress::after {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(236, 236, 236);
    position: absolute;
    left: 60%;
}

.percentage{
    font-weight: bold;
    background: linear-gradient(to right top, #ffcb06, #ec9c07);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

效果

在線咨詢

上一篇：css實現的立方體自動循環翻轉動畫html頁面源碼
下一篇：HTML培訓：如何在HTML中更改文本大小

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html5+canvas雨滴附在窗戶效果插件-rainyday.js

您的項目需求