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

您的项目需求