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

代码语言: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