如何做一个简单漂亮的粒子抖动特效登录页
程序员文章站
2024-03-22 23:09:52
...
一、实现效果：
首先分析这个页面用到了背景粒子效果，登录窗口的抖动，以及按钮的圆圈动效。粒子效果以及抖动效果都有脚本插件。
二、源码地址：
- 粒子插件：https://github.com/VincentGarreau/particles.js
- 抖动插件：https://github.com/NiklasKnaack/jquery-wobblewindow-plugin
三、代码实现：
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/login.css">
</head>
<body>
<div id="bg">
<div id="window" class="login">
<div class="login_title">
<div class="login_title_img">
<img src="img/LOGO.png" />
</div>
<div class="login_title_text">
<p>XXX后台管理系统</p>
</div>
</div>
<div class="login_cont">
<div style="width: 100%;height: 100%;">
<div class="login_box">
<input class="login_input" type="text" id="username" autocomplete="off" placeholder="请输入用户名" tabindex="1" maxlength="15" />
<div class="login_img">
<img src="img/人员.svg"/>
</div>
</div>
<div class="login_box">
<input class="login_input" type="text" id="password" autocomplete="off" placeholder="请输入密码" tabindex="1" maxlength="15" />
<div class="login_img">
<img src="img/锁.svg"/>
</div>
<div class="psw_img">
<img src="img/隐藏.svg" alt="" id="eyesHide">
<img style="display: none;" src="img/显示.svg" alt="" id="eyesShow">
</div>
</div>
</div>
</div>
<div class="forget">
<a href="#" class="forget_click" >忘记密码</a>
</div>
<div class="login_btn">
<div class="btn_block">
<div class="button_login" >
<span class="button_circle" >
</span>
<a href="#" class="button_login_inner" >
<span class="button_text_container">
登录
</span>
</a>
</div>
<div style="position: relative;display: inline-block;width: 5%;height: 100%;"></div>
<div class="button_login">
<a href="#" class="button_sign_inner" >
<span class="button_text_container">
注册
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="JS/particles.min.js"></script>
<script src="JS/jquery-1.11.0.min.js"></script>
<script src='JS/jquery.wobblewindow.min.js'></script>
<script src='login.js'></script>
</body>
</html>
引用了四个JS文件，我这里还是用的jquery1.11的版本，其中login.js是我们自己编写的js。
CSS部分：
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
overflow: hidden;
z-index: 0;
}
#bg {
width: 100%;
height: 100%;
background-color: #040b1a;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
.login{
width: 20%;
height: 50%;
z-index: 2;
position: absolute;
border-radius: 5px;
top: 25%;
left: 40%;
}
.login_title{
width: 90%;
height: 15%;
margin: 0 auto ;
margin-top: 10%;
margin-bottom: 10%;
}
.login_title_img{
width: 20%;
height: 100%;
float: left;
}
.login_title_text{
width: 80%;
height: 100%;
font-size: 22px;
font-weight: bold;
background-image: -webkit-linear-gradient(left, #4BFFFC, #6e8efb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
float: left;
line-height: 100%;
}
.login_title img{
width: 100%;
height: 100%;
padding-left: 12%;
}
.login_title p{
padding-right: 11%;
text-align:right;
/* margin: 0 auto; */
}
.login_cont{
width: 90%;
height: 35%;
margin: 0 auto ;
}
.login_box{
width: 90%;
height:35%;
position: relative;
z-index: 1;
margin: 0 auto;
margin-top: 8%;
vertical-align: top;
}
.login_img{
height: 100%;
width: 20%;
float: left;
background-color: #4A99FF;
position: absolute;
}
.login_img img{
width: 40%;
height: 40%;
padding: 30%;
}
.psw_img{
height: 100%;
width: 20%;
right: 0px;
position: absolute;
}
.psw_img img{
width: 40%;
height: 40%;
padding: 30%;
}
input:focus{ outline:none }
.login_input{
width: 75%;
height: 100%;
padding:0 0 0 20%;
float: right;
border: none;
text-decoration:none;
}
.forget{
width: 90%;
height: 10%;
margin: 0 auto ;
}
.forget_click{
float: right;
padding-right: 8%;
color: #606b7b;
text-decoration:none;
font-size: 12px;
}
.forget_click:hover{
color: #4A99FF;
}
.login_btn{
width: 90%;
height: 10%;
margin: 0 auto ;
}
.btn_block{
text-align: center;
height: 100%;
}
.button_login{
overflow: hidden;
position: relative;
display: inline-block;
border-radius: 3px;
height: 100%;
width: 40%;
}
.button_circle{
background-color: red;
border-radius: 1000px;
position: absolute;
left:0;
top:0;
width: 0px;
height: 0px;
margin-left: 0px;
margin-top: 0px;
pointer-events: none;
/*animation-timing-function: ease-in-out; */
}
.button_login_inner{
display: inline-block;
background: linear-gradient(135deg, #4BFFFC, #6e8efb);
color: #F4F4F4;
font-size: 16px;
font-weight: normal;
width: 100%;
height: 100%;
text-align: center;
border-radius: 3px;
transition: 400ms;
text-decoration: none;
z-index: 100000;
padding-top: 7%;
}
.button_sign_inner{
display: inline-block;
background:none;
color: #4A99FF;
font-size: 16px;
font-weight: normal;
width: 100%;
height: 100%;
text-align: center;
border-radius: 3px;
border:2px solid ;
border-image:linear-gradient(to right, #30d0cd, #5f7ad6) 1 10;
box-sizing: border-box;
transition: 400ms;
text-decoration: none;
z-index: 100000;
padding-top: 5%;
}
.button_text_container{
position:relative;
z-index: 10000;
}
.explode-circle {
animation: explode 0.5s forwards;
}
.desplode-circle{
animation: desplode 0.5s forwards;
}
@keyframes explode {
0% {
width: 0px;
height: 0px;
margin-left: 0px;
margin-top: 0px;
background-color: rgba(42, 53, 80,0.2);
}
100% {
width: 300;
height: 300px;
margin-left: -200px;
margin-top: -200px;
background-color: rgba(0, 255, 255, 0.6);
}
}
@keyframes desplode {
0% {
width: 300px;
height: 300px;
margin-left: -200px;
margin-top: -200px;
background-color: rgba(0, 255, 255, 0.6);
}
100% {
width: 0px;
height: 0px;
margin-left: 0px;
margin-top: 0px;
background-color: rgba(102, 121, 255, 0.8);
}
}
JS部分：
控件的各项说明已经备注，可以根据自己的喜好更改。
//背景动态粒子
particlesJS('bg',
{
"particles": {
"number": {
"value": 160,//数量
"density": {
"enable": true, //启用粒子的稀密程度
"value_area": 800 //区域散布密度大小
}
},
"color": {
"value": "#00aeff" //原子的颜色
},
"shape": {
"type": "circle", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]
"stroke": {
"width": 0, //原子的宽度
"color": "#362cff" //原子颜色
},
"polygon": {
"nb_sides": 5 // 原子的多边形边数
},
"image": {
"src": "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png"
"width": 100, //图片宽度
"height": 100 //图片高度
}
},
"opacity": {
"value": 1, //不透明度
"random": true, //随机不透明度
"anim": {
"enable": true, //渐变动画
"speed": 1, // 渐变动画速度
"opacity_min": 0, //渐变动画不透明度
"sync": true
}
},
"size": {
"value": 3, //原子大小
"random": true, // 原子大小随机
"anim": {
"enable": false, // 原子渐变
"speed": 4, //原子渐变速度
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false, //连接线
"distance": 150, //连接线距离
"color": "#ffffff", //连接线颜色
"opacity": 0.4, //连接线不透明度
"width": 1 //连接线的宽度
},
"move": {
"enable": true, //原子移动
"speed": 1, //原子移动速度
"direction": "none", //原子移动方向 "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left"
"random": true, //移动随机方向
"straight": false, //直接移动
"out_mode": "out", //是否移动出画布
"bounce": false, //是否跳动移动
"attract": {
"enable": false, // 原子之间吸引
"rotateX": 600, //原子之间吸引X水平距离
"rotateY": 600 //原子之间吸引Y水平距离
}
}
},
"interactivity": {
"detect_on": "canvas", //原子之间互动检测 "canvas", "window"
"events": {
"onhover": {
"enable": true, //悬停
"mode": "bubble" //悬停模式 "grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"]
},
"onclick": {
"enable": false, //点击效果
"mode": "repulse" //点击效果模式 "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]
},
"resize": true // 互动事件调整
},
"modes": {
"grab": {
"distance": 100, //原子互动抓取距离
"line_linked": {
"opacity": 0.8 //原子互动抓取距离连线不透明度
}
},
"bubble": {
"distance": 250, //原子抓取泡沫效果之间的距离
"size": 4, // 原子抓取泡沫效果之间的大小
"duration": 2, //原子抓取泡沫效果之间的持续事件
"opacity": 1, //原子抓取泡沫效果透明度
"speed": 3
},
"repulse": {
"distance": 400, //击退效果距离
"duration": 0.4 //击退效果持续事件
},
"push": {
"particles_nb": 4 //粒子推出的数量
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
);
//背景框抖动
$( document ).ready( function() {
var settings = {
name: 'window_1',
depth: 1, //类似 zIndex
offsetX: 0, //控制div大小
offsetY: 0,
moveTypeIn: 'move',
moveTypeOut: 'wobble',
wobbleFactor: 0.9, //控制摆动效果
wobbleSpeed: 0.1, //控制摆动速度
moveSpeed: 3, //控制移动速度
lineWidth: 0, //边框宽度
lineColor: '', //边框颜色
bodyColor: '#1A3A5CA4', //背景颜色，必须是十六进制
numberOfXPoints: 7, //水平点的数量，必须是一个奇数
numberOfYPoints: 5, //垂直点的数量，必须是一个奇数
movementLeft: true, //如果真的, 左边的点可以移动
movementRight: true, //如果真的, 右边的点可以移动
movementTop: true, //如果真的, 顶部的点可以移动
movementBottom: true, //如果真的, 底部的点可以移动
debug: false //如果真的，则打开调试模式
};
var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ), settings );
} );
//密码显示与隐藏
$("#eyesShow").click(function(){
$("#password").attr("type","password");
$("#eyesShow").hide();
$("#eyesHide").show();
});
$("#eyesHide").click(function(){
$("#password").attr("type","text");
$("#eyesHide").hide();
$("#eyesShow").show();
});
//鼠标悬停
$( ".button_login_inner" ).mouseenter(function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$(this).prev(".button_circle").css({"left": relX, "top": relY });
$(this).prev(".button_circle").removeClass("desplode-circle");
$(this).prev(".button_circle").addClass("explode-circle");
});
$( ".button_login_inner" ).mouseleave(function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$(this).prev(".button_circle").css({"left": relX, "top": relY });
$(this).prev(".button_circle").removeClass("explode-circle");
$(this).prev(".button_circle").addClass("desplode-circle");
});
这里注意的是十六进制透明色的使用，在实色前加上透明码，具体各个透明值的编码参考：
上一篇： 21种颜色的rgb值及显示
下一篇： 手机网站调起支付宝支付
推荐阅读