div+css实现简洁登录表单页面代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现简洁登录表单页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i|Monoton"); @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); * { box-sizing: border-box; } html { font-size: 14px; } body { background: linear-gradient(to bottom, #68d8d6, #ffffff); color: #454749; display: flex; align-items: center; justify-content: center; font-family: "Source Sans Pro", sans-serif; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: Monoton, sans-serif; margin-bottom: 0.5rem; } /** * Tiles */ .tile { background-color: #ffffff; border-radius: 0.1rem; box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2), 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2); position: relative; width: 100%; min-width: 320px; max-width: 24rem; overflow: hidden; } .tile .tile-header { background-image: url("//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png"); background-position: center; background-size: cover; height: 12rem; } .tile .tile-body { padding: 2rem; } /** * Forms */ .form-input { display: block; position: relative; margin-bottom: 1rem; } .form-input > .material-icons { position: absolute; font-size: 1.5rem; top: 1.2rem; } .form-input > .material-icons ~ input, .form-input > .material-icons ~ .label, .form-input > .material-icons ~ .underline { margin-left: 2.25rem; width: calc(100% - 2.25rem); } .form-input input { border: none; box-shadow: none; padding-top: 1.5rem; padding-right: 0; padding-bottom: 0.5rem; padding-left: 0; outline-style: none; width: 100%; } .form-input input ~ .label { color: #868e96; font-size: 1rem; margin: 0; pointer-events: none; position: absolute; top: 1.5rem; left: 0; transition: top 0.2s, font 0.2s; z-index: 1; } .form-input input ~ .underline { background-color: #bdc1c5; height: 1px; width: 100%; position: absolute; bottom: 0; } .form-input input:hover ~ .underline, .form-input input:focus ~ .underline { background-color: #07beb8; } .form-input input:hover ~ .label, .form-input input:focus ~ .label { color: #07beb8; } .form-input input:focus ~ .underline { height: 2px; } .form-input input:focus ~ .label, .form-input input:valid ~ .label { top: 0; font-size: 0.85rem; } .form-input input:-webkit-autofill ~ .label { top: 0; font-size: 0.85rem; } /** * Buttons */ .btn { border-radius: 0.2rem; display: inline-block; padding-top: 0.5rem; padding-right: 1rem; padding-bottom: 0.5rem; padding-left: 1rem; } .btn, [role=button], [type=button] { -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; } .btn-irenic { background-color: #07beb8; color: white; } .btn-irenic:hover, .btn-irenic:focus, .btn-irenic:active { background-color: #06a5a0; } .btn-serene { background-color: #3dccc7; color: white; } .btn-serene:hover, .btn-serene:focus, .btn-serene:active { background-color: #32beb9; } .btn-tranquil { background-color: #68d8d6; color: white; } .btn-tranquil:hover, .btn-tranquil:focus, .btn-tranquil:active { background-color: #54d3d0; } .btn-calm { background-color: #9ceaef; color: white; } .btn-calm:hover, .btn-calm:focus, .btn-calm:active { background-color: #86e5eb; } .btn-cool { background-color: #c4fff9; color: white; } .btn-cool:hover, .btn-cool:focus, .btn-cool:active { background-color: #abfff6; } .btn-ice { background-color: #ffffff; color: white; } .btn-ice:hover, .btn-ice:focus, .btn-ice:active { background-color: #f2f2f2; } .btn-base { background-color: #454749; color: white; } .btn-base:hover, .btn-base:focus, .btn-base:active { background-color: #393a3c; } /** * Utilities */ .clearfix:after { content: ""; display: table; clear: both; } .float-right { float: right; } /** * */ .submit-container { position: relative; } .submit-container #submit { position: relative; z-index: 2; outline: none; opacity: 1; transition: transform 0.1s ease-in, opacity 0.1s ease-in, border-radius 0.1s ease-in; right: -1px; } .submi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0