科技行业平台系统登录表单页面效果代码-html代码-BFW代码库

科技行业平台系统登录表单页面效果代码

代码语言：html

代码描述：科技行业平台系统登录表单页面效果代码

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

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

<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <style>
        body{
                zoom:0.6;
            }
                * {
        	padding:0;
        	margin:0;
        	box-sizing:border-box;
        	user-select:none
        }
        li {
        	list-style-type:none
        }
        a {
        	text-decoration:none;
        	color:#fff
        }
        html {
        	background:#000;
        	height:100%
        }
        body {
        	background:#000;
        	max-width:1920px;
        	margin:0 auto;
        	height:100%;
        	position:relative;
        	font-family:"PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif
        }
        body::before {
        	position:absolute;
        	width:100%;
        	height:100%;
        	content:"";
        	left:0;
        	top:0;
        	z-index:100;
        	pointer-events:none
        }
        .loginbg {
        	background-image:linear-gradient(300deg,#004491,#1e88e5);
        	position:absolute;
        	width:100%;
        	height:50%;
        	left:0;
        	top:0;
        	z-index:0
        }
        .loginav {
        	max-width:1300px;
        	width:100%;
        	height:100%;
        	margin:0 auto;
        	z-index:10;
        	box-shadow:0 0 30px rgba(0,0,0,.1);
        	display:flex;
        	align-items:center;
        	justify-content:space-between
        }
        .video {
        	position:absolute;
        	width:1200px;
        	left:0;
        	padding-bottom:40px;
        	pointer-events:none
        }
        .video video {
        	width:100%
        }
        .video::before {
        	position:absolute;
        	content:"";
        	width:200px;
        	height:100%;
        	background:#000;
        	right:0;
        	top:0
        }
        .logotit {
        	text-align:center;
        	padding:40px 0;
        	font-size:30px
        }
        .loginbox {
        	padding:30px 0 50px 0;
        	width:600px;
        	padding:30px 50px;
        	flex-shrink:0;
        	position:relative;
        	z-index:100
        }
        .logininput .forminput {
        	border:2px solid rgba(32,163,245,.4);
        	font-family:"PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;
        	display:block;
        	padding-left:50px;
        	font-size:18px;
        	color:#fff;
        	width:100%;
        	line-height:48px;
        	outline:0;
        	text-indent:1px;
        	background:rgba(32,163,245,.1)
        }
        input::input-placeholder {
        	color:#fff
        }
        ::-webkit-input-placeholder {
        	color:#fff
        }
        .flex1 {
        	display:flex;
        	justify-content:space-between;
        	align-items:center
        }
        .flex1 label {
        	color:#fff;
        	display:flex;
        	align-items:center
        }
        .logininput>li {
        	display:block;
        	padding:15px 0;
        	position:relative
        }
        .logininput li>i {
        	position:absolute;
        	height:100%;
        	left:15px;
        	top:0;
        	display:flex;
        	align-items:center
        }
        .logintit {
        	color:#00bff4;
        	text-align:center;
        	position:relative;
        	padding:25px 0;
        	font-size:24px
        }
        .btn-primary {
        	background:#20a3f5;
        	display:block;
        	text-align:center;
        	color:#fff;
        	line-height:48PX;
        	font-size:24px
        }
        .btn-primary:hover {
        	background:#137bd6
        }
        .copyright {
        	position:fixed;
        	width:100%;
        	left:0;
        	bottom:10px;
        	text-align:center;
        	color:#006b95;
        	font-size:12px
        }
        .logo {
        	position:absolute;
        	top:-120px;
        	width:100%;
        	left:0;
        	text-align:center;
        	color:#fff
        }
        .logo h1,.logo h2 {
        	background:linear-gradient(90deg,#009ef3,#00e9d0);
        	background-size:cover;
        	-webkit-background-clip:text;
        	background-clip:text;
        	-webkit-text-fill-color:transparent;
        	text-fill-color:transparent
        }
        .logo h1 {
        	font-weight:bolder;
        	font-size:48px;
        	font-family:"Microsoft YaHei","HanHei SC";
        	letter-spacing:2px
        }
        .logo h2 {
        	font-size:30px;
        	text-transform:uppercase;
        	font-weight:lighter;
        	letter-spacing:2px
        }
        .boxall {
        	border:2px solid #186baf;
        	background:rgba(32,163,245,.1);
        	position:relative;
        	transform:scale(.7);
        	opacity:0;
        	animation:shows 1s forwards
        }
        @keyframes shows {
        	to {
        	transform:scale(1);
        	opacity:1
        }
        }.boxall:before,.boxall:.........完整代码请登录后点击上方下载按钮下载查看