css实现简洁模糊大气的后台登录页面代码
代码语言:html
所属分类:布局界面
代码描述:css实现简洁模糊大气的后台登录页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"><title>登录注册忘记密码页面</title><link rel="stylesheet" href="css/normalize.min.css"> <style> * { outline-width: 0; font-family: "Nunito"!important } body { height: 100vh; width: 100vw; background: url("//repo.bfw.wiki/bfwrepo/image/607aa1b0d81d0.png") center/cover fixed; display: flex; justify-content: center; align-items: center } #formContainer { display: flex; transition: .2s ease; height: 342.5px; transition-delay: .3s } #formContainer.toggle { height: 480px; transition-delay: 0s } .formLeft { background: #fff; border-radius: 5px 0 0 5px; padding: 0 35px; box-sizing: border-box; display: flex; align-items: center } .formLeft img { display: block; width: 72px; border-radius: 50%; box-shadow: 0 5px 5px rgba(0,0,0,0.2) } .formRight { position: relative; overflow: hidden; border-radius: 0 5px 5px 0; display: flex; flex-direction: column; justify-content: center; } .formRight:before { content: ""; position: absolute; top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); background: url("//repo.bfw.wiki/bfwrepo/image/607aa1b0d81d0.png") center/cover fixed; box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.5); filter: blur(5px) } .formRight form { position: relative; width: 350px; padding: 25px; box-sizing: border-box; white-space: nowrap; overflow: hidden } .formRight form header { color: #fff; text-align: center; margin-bottom: 15px } .formRight form header h1 { margin: 0; font-weight: 400; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .formRight form header p { margin: 5px 0 0; opacity: .5; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .formRight form section label { display: block; margin-bottom: 15px; position: relative } .formRight form section label p { color: #fff; margin: 0 0 10px 0; font-weight: 600; font-size: 12px; opacity: .5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .formRight form section label input { width: 100%; display: block; border: 0; background: transparent; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 0 0 10px; box-sizing: border-box; font-weight: 600 } .formRight form section label input:focus~.border { transform: scale(1,1) } .formRight form section label input:not(:-moz-placeholder-shown)~.border { transform: scale(1,1) } .formRight form section label input:not(:-ms-input-placeholder)~.border { transform: scale(1,1) } .formRight form section label input:not(:placeholder-shown)~.border { transform: scale(1,1) } .formRight form section label .border { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; transform: scale(0,1); transition: .2s ease } .formRight form section label:last-child { margin-bottom: 0 } .formRight form section button { background: #00897B; border: 0; width: 100%; padding: 10px 0; font-weight: 600; color: #fff; cursor: pointer } .formRight form section button:hover { background: #007f72 } .formRight form footer { margin-top: 15px; display: flex } .formRight form footer button { background: transparent; padding: 0; border: 0; color: #fff; cursor: pointer; font-size: 12px; font-weight: bold; flex: 1; opacity: .5 } .formRight form footer button:hover { opacity: 1 } .formRight form.otherForm { top: 0; left: 0; position: absolute; background: #fff; height: 100%; z-index: 1; display: flex; flex-direction: column; justify-content: center; width: 0; padding: 25px 0; transition: .2s ease; transition-delay: .2s; border-left: 1px solid rgba(0,0,0,0.1) } .formRight form.otherForm h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0