粒子波动流登录界面-html代码-BFW代码库

代码语言：html

代码描述：粒子波动流登录界面

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
	<head>

		<style>
			body {
				margin: 0;
				overflow: hidden;
				background: linear-gradient(to bottom, #19778c, #095f88);
				background-size:1400% 300%;
				animation: dynamics 6s ease infinite;
				-webkit-animation: dynamics 6s ease infinite;
				-moz-animation: dynamics 6s ease infinite;
				font-size: 14px;
				color: #ffffff;
				min-height: 700px;
			}
			/*登录样式*/
			.main {
				position: fixed;
				text-align: center;
				top: 182px;
				width: 100%;
				height: auto;
				display: flex;
				justify-content: center;
			}
			.login {
				width: 470px;
				height:470px;
				background: linear-gradient(to bottom, #19778c, #095f88);
				animation: dynamics 6s ease infinite;
				-webkit-animation: dynamics 6s ease infinite;
				-moz-animation: dynamics 6s ease infinite;
				opacity: 0.9;
				border: solid 1px #13a1fc;
				background-size:1400% 300%;
			}
			@keyframes dynamics {
				0% {
					background-position: 0% 0%;
				}
				50% {
					background-position: 50% 100%;
				}
				100% {
					background-position: 100% 0%;
				}
			}
			.log-con {
				background: linear-gradient(#13a1fc, #13a1fc) left top, linear-gradient(#13a1fc, #13a1fc) left top,
				linear-gradient(#13a1fc, #13a1fc) right top, linear-gradient(#13a1fc, #13a1fc) right top,
				linear-gradient(#13a1fc, #13a1fc) left bottom, linear-gradient(#13a1fc, #13a1fc) left bottom,
				linear-gradient(#13a1fc, #13a1fc) right bottom, linear-gradient(#13a1fc, #13a1fc) right bottom;
				background-repeat: no-repeat;
				background-size: 3px 20px, 20px 3px;
				height: 100%;
				margin: -2px;
				padding: 3px 1px 1px 0;
				border-radius: 3px;
			}
			.log-con >span {
				font-size: 30px;
				font-weight: bold;
				line-height: 24px;
				letter-spacing: 2px;
				display: block;
				margin: 20px 0 44px 0;
			}
			.log-con >span::after {
				display: block;
				content: '';
				width: 57px;
				height: 3px;
				background: #ffffff;
				margin-top: 16px;
				justify-content: center;
				position: relative;
				left: 206px;
			}
			.log-con>input {
				display: block;
				margin: 10px 0 32px 70px;
				width: 330px;
				height: 42px;
				background-color: #ffffff;
				border-radius: 4px;
				opacity: 0.9;
				border: 0;
				font-size: 16px;
				outline: none;
				padding-left: 10px;
				color: #000000;
			}
			.log-con>a {
				width: 340px;
				height: 44px;
				background-color: #0090ff;
				border-radius: 4px;
				display: block;
				margin: 10px 0 0 70px;
				text-align: center;
				line-height: 44px;
				cursor: pointer;
				opacity: 1;
			}

			input::-webkit-input-placeholder {
				color: #000000;
				font-size: 16px;
			}
			.log-con>.code {
				width: 216px;
				display: inline-block;
				margin-left: 6px;
			}
			.log-con>#code {
				width: 94px;
				display: inline-block;
				margin-left: 14px;
				cursor: pointer;
			}
			/*logo*/
			.logo {
				width: 168px;
				height: 75px;
				position: fixed;
				left: 150px;
				top: 26px;
			}
			.logo>img {
				max-width: 100%;
				max-height: 100%;
			}
			/*版权样式*/
			.copyright {
				position: fixed;
				bottom: 10px;
				font-size: 16px;
				display: block;
				width: 100%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="logo">
		
		</div>
		<div class="main">
			<div class="login">
				<div class="log-con">
					<span>登录</span>
					<input type="text" class="name" placeholder="请输入用户名"/>
					<input type="text" class="password" placeholder="请输入密码"/>
					<input type="text" class="code" placeholder="请输入验证码"/>
					<input type="button" id="code" onClick="change();"/>
					<a>立即登录</a>
				</div>
			</div>
		</div>
		<div class="copyright">
			<a>版权所有</a>
		</div>
		
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.63.min.js"></script>
		<script type="text/javascript">

			var SEPARATION = 100, AMOUNTX = 60, AMOUNTY = 40;
			var container;
			var camera, scene, renderer;
			var particles, particle, count = 0;
			var mouseX = 0, mouseY = 0;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			$(function () {
				init();		//初始化
				animate();	//动画效果
				change();	//验证码
			});

			//初始化
			function init() {

				container = document.createElement( 'div' );	//创建容器
				document.body.appendChild( container );			//将容器添加到页面上
				camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 1, 1500 );		//创建透视相机设置相机角度大小等
				camera.position.set(0,450,2000);		//设置相机位置

				scene = new THREE.Scene();			//创建场景
				particles = new Array();

				var PI2 = Ma.........完整代码请登录后点击上方下载按钮下载查看