700字范文 > HTML+CSS登录注册界面

HTML+CSS登录注册界面

时间：2019-10-10 01:12:59

相关推荐

HTML+CSS登录注册界面

一、效果演示

[注]: 这里需要我们创建三个文件，一个是index.html文件，一个是style.css文件还有一个是login.js文件，把代码copy上去只要路径找好就能正常运行了。

演示地址：演示链接

二、代码实现

2.1、HTML主页面

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>登录注册界面</title><link rel="stylesheet" href="style.css"></head><body><div class="container right-panel-active"><div class="container_from container_signup"><form action="#" class="from" id="from1"><h2 class="form_title">注册账号</h2><input type="tel" placeholder="Telephone" class="input" pattern="^1[0-9]{10}$"><input type="text" placeholder="Username" class="input"><input type="password" placeholder="Password" class="input"><button class="btn">点击注册</button></form></div><div class="container_from container_signin"><form action="#" class="from" id="from2"><h2 class="form_title">欢迎登录</h2><input type="text" placeholder="Username" class="input"><input type="password" placeholder="Password" class="input"><div><span>记住密码</span><input type="checkbox" name="rup" id="rup" /><span>自动登录</span><input type="checkbox" name="autoLogin" /></div><a href="#" class="link">忘记密码?</a><button class="btn">登录</button></form></div><div class="container_overlay"><div class="overlay"><div class="overlay_panel overlay_left"><button class="btn" id="signin">已有账号，直接登录</button></div><div class="overlay_panel overlay_right"><button class="btn" id="signup">没有账号，点击注册</button></div></div></div></div><script src="login.js"></script></body></html>

2.2、CSS代码

/* :root根伪类--为自定义CSS属性方便我们重复使用同一个属性自定义属性使用var()进行定义*/:root {/* 背景颜色 */--white: #e9e9e9;--gray: #333;--blue: 口 #0367a6;--lightblue: 口 #008997;/*外边框圆角属性*/--button-radius: 0.7rem;/* 登录注册框的大小 */--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: #e9e9e9;background: url(home4.jpg);background-attachment: fixed;/* */background-position: center;background-repeat: no-repeat;background-size: cover;display: grid;height: 100vh;place-items: center;}.from_title {font-weight: 300;margin: 0;margin-bottom: 1.25rem;}.link {color: rgb(90, 105, 238);font-size: 0.9rem;margin: 1rem 0 0 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);height: var(--max-height);max-width: var(--max-width);overflow: hidden;position: relative;width: 100%;}.container_from {height: 100%;position: absolute;top: 0;transition: all 0.6s ease-in-out;}/* 登录框 */.container_signin {/*控制登录界面移动 */left: 0%;width: 50%;z-index: 2;/*控制移动顺序 */}#rup {margin-right: 2rem;}.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-color: #008997; */background: url(home4.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%;}/* 控制按钮移动 transform:translate(x,y)属性*//* 跳转到登录界面 */.overlay_left {transform: translateX(-5%);}.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: skyblue;background-image: linear-gradient(to right, skyblue, pink 65%);border-radius: 5px;margin: 0px;border: 1px solid skyblue;color:#222831;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:hover {transform: scale(0.95);}/* 设置点击没有边框 */input:focus {outline: none;border: 1px solid skyblue;}/* 登录表单 */.from {background-color: var(--white);display: flex;align-items: center;/*justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */justify-content: center;/* flex-direction: column; 垂直显示 */flex-direction: column;padding: 0 4rem;height: 100%;text-align: center;}/* 输入账号密码框样式设置 */.input {background-color: #fff;border: 1px solid white; padding: 0.9rem 0.9rem;margin: 0.5rem 0;width: 100%;border-radius: 20px;}@keyframes show {0%,50% {opacity: 0;z-index: 1;}50%,100% {opacity: 1;z-index: 5;}}

2.3、JS代码

const signinBtn = document.getElementById("signin");const signupBtn = document.getElementById("signup");const container = document.querySelector(".container");signinBtn.addEventListener("click", () => {container.classList.remove("right-panel-active")})signupBtn.addEventListener("click", () => {container.classList.add("right-panel-active")})

-------------------------------结束----------------------------

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。