css布局一个卡片式登录表单页面效果代码
代码语言:html
所属分类:表单美化
代码描述:css布局一个卡片式登录表单页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import url('https://fonts.googleapis.com/css?family=Raleway:400,700'); * { box-sizing:border-box; margin:0; padding:0; font-family:Raleway,sans-serif } body { background:linear-gradient(90deg,#C7C5F4,#776BCC) } .container { display:flex; align-items:center; justify-content:center; min-height:100vh } .screen { background:linear-gradient(90deg,#5D54A4,#7C78B8); position:relative; height:600px; width:360px; box-shadow:0 0 24px #5C5696 } .screen__content { z-index:1; position:relative; height:100% } .screen__background { position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0) } .screen__background__shape { transform:rotate(45deg); position:absolute } .screen__background__shape1 { height:520px; width:520px; background:#FFF; top:-50px; right:120px; border-radius:0 72px 0 0 } .screen__background__shape2 { height:220px; width:220px; background:#6C63AC; top:-172px; right:0; border-radius:32px } .screen__background__shape3 { height:540px; width:190px; background:linear-gradient(270deg,#5D54A4,#6A679E); top:-24px; right:0; border-radius:32px } .screen__background__shape4 { height:400px; width:200px; background:#7E7BB9; top:420px; right:50px; border-radius:60px } .login { width:320px; padding:30px; padding-top:156px } .login__field { padding:20px 0; position:relative } .login__icon { position:absolute; top:30px; color:#7875B5 } .login__input { border:0; border-bottom:2px solid #D1D1D4; background:0; padding:10px; padding-left:24px; font-weight:700; width:75%; transition:.2s } .login__input:active,.login__input:focus,.login__input:hover { outline:0; border-bottom-color:#6A679E } .login__submit { background:#fff; font-size:14px; margin-top:30px; padding:16px 20px; border-radius:26px; border:1px solid #D4D3E8; text-transform:uppercase; font-weight:700; display:flex; align-items:center; width:100%; color:#4C489D; box-shadow:0 2px 2px #5C5696; cursor:pointer; transition:.2s } .login__submit:active,.login__submit:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0