js+css实现登录注册tab选项卡表单切换代码
代码语言:html
所属分类:表单美化
代码描述:js+css实现登录注册tab选项卡表单切换代码
代码标签: js css 登录 注册 tab 选项卡 表单 切换 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 10px; } body { min-height: 100vh; display: grid; place-content: center; text-rendering: optimizeSpeed; padding: 2em; background: linear-gradient( 90deg, hsla(328, 75%, 45%, 1) 0%, hsla(269, 85%, 41%, 1) 100% ); line-height: 1.4; font-family: 'Work Sans', sans-serif; } input, label, small, button { display: block; } .wrapper { width: 350px; height: auto; margin: auto; position: relative; } .tabs { width: 100%; height: 7rem; display: flex; justify-content: center; position: absolute; top: -45px; left: 0; z-index: 0; } .navTab { display: flex; justify-content: center; padding: 1em 0; width: 50%; border: 0; outline: 0; font-size: 1.6rem; font-weight: 500; background: linear-gradient( 90deg, hsla(328, 75%, 45%, 1) 0%, hsla(269, 85%, 41%, 1) 100% ); color: hsl(0, 0%, 100%); border-radius: 30px 30px 0 0; cursor: pointer; } .navTab.active { background: #ffffff; color: hsl(0, 0%, 10%); } .contentWrapper { width: 100%; position: relative; padding: 2em; border-radius: 30px; background-color: hsl(0, 0%, 100%); box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4); } .content { display: none; overflow: hidden; z-index: 1000; animation: fadeIn 1s ease-in-out; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .form-group { display: flex; flex-direction: column; } .formGroup label { display: inline-block; margin: 0.5em 0; font-size: 1.3em; font-weight: 400; color: #1f1414; } .formGroup input:not(input[type='checkbox']) { width: 100%; height: 40px; padding: 0 0.5em; font-weight: 1.5rem; font-weight: 400; color: hsl(0, 0%, 10%); outline: 0; border: 1px solid #e5e1e1; } .formGroup input[type='checkbox'] { cursor: pointer; } .formGroup input::placeholder { color: #b3b3b3; } .formGroup div { display: flex; align-items: center; gap: 0.5em; margin: 1em 0; } .formGroup div span { color: hsl(203, 6%, 41%); cursor: pointer; user-select: none; } .messageHelp { margin: 0.5em 0; font-size: 1.1rem; color: hsl(203, 20%, 41%); user-select: none; } #register input:first-of-type { margin-bottom: 1em; } #passwordReset { display: inline-block; position: absolute; top: 66%; right: 3rem; color: hsl(354, 70%, 54%); font-size: 1.1rem; font-weight: 500; } .btn { width: 100%; padding: 0.75em 1em; margin: 2em 0 0 0; border: 0; outline: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: 1px; border-radius: 30px; background: linear-gradient( 90deg, hsla(328, 75%, 45%, 1) 0%, hsla(269, 85%, 41%, 1) 100% ); color: hsl(0, 0%, 100%); cursor: pointer; transition: all 250ms ease-in-out; } .content.active { display: block; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="wrapper"> <div class="tabs"> <button class="navTab active" data-toggle="login">Login</button> <button class="navTab" data-toggle="register">Register</button> </div> <div class="contentWrapper"> <div class="content active" id="login"> <form action="#" method="POST" autocomplete="off"> <div class="formGroup"> <label for="email">Email address</label> <input .........完整代码请登录后点击上方下载按钮下载查看
网友评论0