如何做一个简单漂亮的粒子抖动特效登录页

时间: 2023-10-04 admin IT培训

如何做一个简单漂亮的粒子抖动特效登录页

如何做一个简单漂亮的粒子抖动特效登录页

一、实现效果:


首先分析这个页面用到了背景粒子效果,登录窗口的抖动,以及按钮的圆圈动效。粒子效果以及抖动效果都有脚本插件。

二、源码地址:

  • 粒子插件:.js
  • 抖动插件:

三、代码实现:

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" , ".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,  //类似 zIndexoffsetX: 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");});

这里注意的是十六进制透明色的使用,在实色前加上透明码,具体各个透明值的编码参考: