科技行业平台系统登录表单页面效果代码
代码语言: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