粒子波动流登录界面-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">.........完整代码请登录后点击上方下载按钮下载查看