科技行业平台系统登录表单页面效果代码
代码语言: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%;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0