六个好看实用的html简单登录页面小结 |
您所在的位置：网站首页 › web登录页面设计html代码 › 六个好看实用的html简单登录页面小结 |
|
本人找到了六个html登录页面，感觉还行，也挺好看的。 1.效果一：代码： Document * { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; } .container { height: 100%; background-image: linear-gradient(to right, #fbc2eb, #a6c1ee); } .login-wrapper { background-color: #fff; width: 358px; height: 588px; border-radius: 15px; padding: 0 50px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } .header { font-size: 38px; font-weight: bold; text-align: center; line-height: 200px; } .input-item { display: block; width: 100%; margin-bottom: 20px; border: 0; padding: 10px; border-bottom: 1px solid rgb(128, 125, 125); font-size: 15px; outline: none; } .input-item:placeholder { text-transform: uppercase; } .btn { text-align: center; padding: 10px; width: 100%; margin-top: 40px; background-image: linear-gradient(to right, #a6c1ee, #fbc2eb); color: #fff; } .msg { text-align: center; line-height: 88px; } a { text-decoration-line: none; color: #abc1ee; } Login Login Don't have account? Sign up 2.效果二：源码： Document * { margin: 0; padding: 0; } html, body { height: 100%; height: 100%; } .login { width: 358px; height: 588px; border-radius: 15px; padding: 0 50px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #282c34; } .header { font-size: 38px; font-weight: bold; text-align: center; line-height: 200px; color: #61dafb; } .container { height: 30px; width: 250px; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); } input { width: 100%; height: 100%; position: relative; outline: none; border: none; box-sizing: border-box; padding-left: 5px; background-color: #282c34; color: #61dafb; caret-color: #61dafb; } input::placeholder { color: #61dafb; } span { position: absolute; content: ""; display: block; background-color: #61dafb; transition: transform .1s ease-in-out; } .top, .bottom { left: 0px; right: 0px; height: 2px; } .left, .right { top: 0px; bottom: 0px; width: 2px; transform: scaleY(0); } .top { top: 0px; transform: scaleX(0); transform-origin: left center; transition-delay: .2s; } .left { left: 0px; transform-origin: bottom center; transition-delay: .3s; } .bottom { bottom: 0px; } .right { right: 0px; transform-origin: top center; transition-delay: .1s; } input:focus ~ .right { transform: scaleY(1); transform-origin: bottom center; } input:focus ~ .left { transform: scaleY(1); transform-origin: top center; } input:focus ~ .top { transform: scaleY(1); transform-origin: right center; } .container1 { height: 30px; width: 250px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .btn { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); text-align: center; padding: 5px; width: 52%; margin-top: 40px; background-color: #61dafb; color: #fff; } 登录 登录 3.效果三：源码： Document body { background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat; background-size: 100% 130%; } #login_box { width: 20%; height: 400px; background-color: #00000060; margin: auto; margin-top: 10%; text-align: center; border-radius: 10px; padding: 50px 50px; } h2 { color: #ffffff90; margin-top: 5%; } #input-box { margin-top: 5%; } span { color: #fff; } input { border: 0; width: 60%; font-size: 15px; color: #fff; background: transparent; border-bottom: 2px solid #fff; padding: 5px 10px; outline: none; margin-top: 10px; } button { margin-top: 50px; width: 60%; height: 30px; border-radius: 10px; border: 0; color: #fff; text-align: center; line-height: 30px; font-size: 15px; background-image: linear-gradient(to right, #30cfd0, #330867); } #sign_up { margin-top: 45%; margin-left: 60%; } a { color: #b94648; } LOGIN 登录 4.效果四：源码： Document * { padding: 0; margin: 0; } html { height: 100%; } body { background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186)); } .login-container { width: 600px; height: 315px; margin: 0 auto; margin-top: 10%; border-radius: 15px; box-shadow: 0 10px 50px 0px rbg(59, 45, 159); background-color: rgb(95, 76, 194); } .left-container { display: inline-block; width: 330px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; padding: 60px; background-image: linear-gradient(to bottom right, rgb(118, 76, 163), rgb(92, 103, 211)); } .title { color: #fff; font-size: 18px; font-weight: 200; } .title span { border-bottom: 3px solid rgb(237, 221, 22); } .input-container { padding: 20px 0; } input { border: 0; background: none; outline: none; color: #fff; margin: 20px 0; display: block; width: 100%; padding: 5px 0; transition: .2s; border-bottom: 1px solid rgb(199, 191, 219); } input:hover { border-bottom-color: #fff; } ::-webkit-input-placeholder { color: rgb(199, 191, 219); } .message-container { font-size: 14px; transition: .2s; color: rgb(199, 191, 219); cursor: pointer; } .message-container:hover { color: #fff; } .right-container { width: 145px; display: inline-block; height: calc(100% - 120px); vertical-align: top; padding: 60px 0; } .regist-container { text-align: center; color: #fff; font-size: 18px; font-weight: 200; } .regist-container span { border-bottom: 3px solid rgb(237, 221, 22); } .action-container { font-size: 10px; color: #fff; text-align: center; position: relative; top: 200px; } .action-container span { border: 1px solid rgb(237, 221, 22); padding: 10px; display: inline; line-height: 20px; border-radius: 20px; position: absolute; bottom: 10px; left: calc(72px - 20px); transition: .2s; cursor: pointer; } .action-container span:hover { background-color: rgb(237, 221, 22); color: rgb(95, 76, 194); } 登录 忘记密码 注册 提交 5.效果五：源码： Document * { margin: 0; padding: 0; } a { text-decoration: none; } input, button { background: transparent; border: 0; outline: none; } body { height: 100vh; background: linear-gradient(#141e30, #243b55); display: flex; justify-content: center; align-items: center; font-size: 16px; color: #03e9f4; } .loginBox { width: 400px; height: 364px; background-color: #0c1622; margin: 100px auto; border-radius: 10px; box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6); padding: 40px; box-sizing: border-box; } h2 { text-align: center; color: aliceblue; margin-bottom: 30px; font-family: 'Courier New', Courier, monospace; } .item { height: 45px; border-bottom: 1px solid #fff; margin-bottom: 40px; position: relative; } .item input { width: 100%; height: 100%; color: #fff; padding-top: 20px; box-sizing: border-box; } .item input:focus+label, .item input:valid+label { top: 0px; font-size: 2px; } .item label { position: absolute; left: 0; top: 12px; transition: all 0.5s linear; } .btn { padding: 10px 20px; margin-top: 30px; color: #03e9f4; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 2px; left: 35%; } .btn:hover { border-radius: 5px; color: #fff; background: #03e9f4; box-shadow: 0 0 5px 0 #03e9f4, 0 0 25px 0 #03e9f4, 0 0 50px 0 #03e9f4, 0 0 100px 0 #03e9f4; transition: all 1s linear; } .btn>span { position: absolute; } .btn>span:nth-child(1) { width: 100%; height: 2px; background: -webkit-linear-gradient(left, transparent, #03e9f4); left: -100%; top: 0px; animation: line1 1s linear infinite; } @keyframes line1 { 50%, 100% { left: 100%; } } .btn>span:nth-child(2) { width: 2px; height: 100%; background: -webkit-linear-gradient(top, transparent, #03e9f4); right: 0px; top: -100%; animation: line2 1s 0.25s linear infinite; } @keyframes line2 { 50%, 100% { top: 100%; } } .btn>span:nth-child(3) { width: 100%; height: 2px; background: -webkit-linear-gradient(left, #03e9f4, transparent); left: 100%; bottom: 0px; animation: line3 1s 0.75s linear infinite; } @keyframes line3 { 50%, 100% { left: -100%; } } .btn>span:nth-child(4) { width: 2px; height: 100%; background: -webkit-linear-gradient(top, transparent, #03e9f4); left: 0px; top: 100%; animation: line4 1s 1s linear infinite; } @keyframes line4 { 50%, 100% { top: -100%; } } login userName password submit 6.效果六：源码： Document :root { /* COLORS */ --white: #e9e9e9; --gray: #333; --blue: #0367a6; --lightblue: #008997; /* RADII */ --button-radius: 0.7rem; /* SIZES */ --max-width: 758px; --max-height: 420px; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } body { align-items: center; background-color: var(--white); background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg"); /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */ /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; display: grid; height: 100vh; place-items: center; } .form__title { font-weight: 300; margin: 0; margin-bottom: 1.25rem; } .link { color: var(--gray); font-size: 0.9rem; margin: 1.5rem 0; text-decoration: none; } .container { background-color: var(--white); border-radius: var(--button-radius); box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22); height: var(--max-height); max-width: var(--max-width); overflow: hidden; position: relative; width: 100%; } .container__form { height: 100%; position: absolute; top: 0; transition: all 0.6s ease-in-out; } .container--signin { left: 0; width: 50%; z-index: 2; } .container.right-panel-active .container--signin { transform: translateX(100%); } .container--signup { left: 0; opacity: 0; width: 50%; z-index: 1; } .container.right-panel-active .container--signup { animation: show 0.6s; opacity: 1; transform: translateX(100%); z-index: 5; } .container__overlay { height: 100%; left: 50%; overflow: hidden; position: absolute; top: 0; transition: transform 0.6s ease-in-out; width: 50%; z-index: 100; } .container.right-panel-active .container__overlay { transform: translateX(-100%); } .overlay { background-color: var(--lightblue); background: url("https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; left: -100%; position: relative; transform: translateX(0); transition: transform 0.6s ease-in-out; width: 200%; } .container.right-panel-active .overlay { transform: translateX(50%); } .overlay__panel { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: center; position: absolute; text-align: center; top: 0; transform: translateX(0); transition: transform 0.6s ease-in-out; width: 50%; } .overlay--left { transform: translateX(-20%); } .container.right-panel-active .overlay--left { transform: translateX(0); } .overlay--right { right: 0; transform: translateX(0); } .container.right-panel-active .overlay--right { transform: translateX(20%); } .btn { background-color: var(--blue); background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%); border-radius: 20px; border: 1px solid var(--blue); color: var(--white); cursor: pointer; font-size: 0.8rem; font-weight: bold; letter-spacing: 0.1rem; padding: 0.9rem 4rem; text-transform: uppercase; transition: transform 80ms ease-in; } .form>.btn { margin-top: 1.5rem; } .btn:active { transform: scale(0.95); } .btn:focus { outline: none; } .form { background-color: var(--white); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 3rem; height: 100%; text-align: center; } .input { background-color: #fff; border: none; padding: 0.9rem 0.9rem; margin: 0.5rem 0; width: 100%; } @keyframes show { 0%, 49.99% { opacity: 0; z-index: 1; } 50%, 100% { opacity: 1; z-index: 5; } } Sign Up Sign Up Sign In Forgot your password? Sign In Sign In Sign Up const signInBtn = document.getElementById("signIn"); const signUpBtn = document.getElementById("signUp"); const fistForm = document.getElementById("form1"); const secondForm = document.getElementById("form2"); const container = document.querySelector(".container"); signInBtn.addEventListener("click", () => { container.classList.remove("right-panel-active"); }); signUpBtn.addEventListener("click", () => { container.classList.add("right-panel-active"); }); fistForm.addEventListener("submit", (e) => e.preventDefault()); secondForm.addEventListener("submit", (e) => e.preventDefault());到此这篇关于六个好看实用的html简单登录页面小结的文章就介绍到这了,更多相关html登录页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |