概述

应读者要求，蒟蒻君这次写了一个登录/注册的界面。

效果（背景图片可改变）

代码

index.html

<!DOCTYPE HTML>
<html lang = "en">
<head><meta charset = "UTF-8"><title>登录/注册界面</title><link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class = "container right-panel-active"><!--注册--><div class = "container__form container--signup"><form action = "#" class = "form" id = "form1"><h2 class = "form__title">Sign Up</h2><input type = "text" placeholder = "User" class = "input" /><input type = "email" placeholder = "Email" class = "input" /><input type = "password" placeholder = "Password" class = "input" /><button class = "btn">Sign Up</button></form></div><!--登录--> <div class = "container__form container--signin"><form action = "#" class = "form" id = "form2"><h2 class = "form__title">Sign In</h2><input type = "email" placeholder = "Email" class = "input" /><input type = "password" placeholder = "Password" class = "input" /><a href = "#" class = "link">forget your password?</a><button class = "btn">Sign In</button></form></div><!--覆盖之前的界面--> <div class = "container__overlay"><div class = "overlay"><div class = "overlay__panel overlay--left"><button class = "btn" id = "signIn">Sign In</button></div><div class = "overlay__panel overlay--right"><button class = "btn" id = "signUp">Sign Up</button></div></div></div>
</div><script src = "index.js"></script>
</body>
</html>

style.css

: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: var(--white);background: url("background.jpg");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 {-webkit-animation: show 0.6s;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("images/background_oeuhe7.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%;
}
@-webkit-keyframes show {0%,49.99% {opacity: 0;z-index: 1;}50%,100% {opacity: 1;z-index: 5;}
}
@keyframes show {0%,49.99% {opacity: 0;z-index: 1;}50%,100% {opacity: 1;z-index: 5;}
}

index.js

// 设置按钮
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());

background.jpg（可以改，同名）

超酷超实用的登录/注册界面，保你看完不后悔（无套路提供源码）相关推荐

【HTML+CSS】高级、简约的移动端登录注册界面，HR看了直呼里面请
一.静态页面index.html <!DOCTYPE html> <html lang="en"><head><meta charset= ...
❤ ❤双手奉上京东生鲜页面（包含登录注册，购物车，商品页，商品详情页，调查问卷，提供源码！！！）❤ ❤
提示:该项目不涉及SQL+Servlet+mysql+navicat, 提供源码:本项目源码:链接:https://pan.baidu.com/s/1v_pV4_ybIZrGYzpvG8Frsw 提取 ...
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
一:源码获取这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面,这里我将源码资源分享给大家,大家可以直接免费下载使用哦,没有 vip 的小伙伴找我私聊发送"登录注册"即 ...
右侧按钮登录注册html,翻转式用户登录注册界面设计
这是一款非常实用的翻转式用户登录注册界面设计效果.该用户登录注册界面使用纯CSS3来制作,在用户点击登录和注册两个按钮时,登录和注册界面可以以水平翻转的方式来回切换,效果非常的酷. 制作方法 HTML ...
AndroidStudio实现用户登录注册界面代码（一）
首先使用Android Studio的布局文件xml实现界面设计第一步:新建工程项目MyAPP 选择Empty Activity 点击"下一步" 1.在res/layout/ac ...
Android音乐播放器（二）登录注册界面
这是去年大二做的一个简单音乐播放器项目:是尽可能模仿酷狗音乐写的,具体实现的功能如下: 1:启动动画:点击运行程序会出现一个两秒钟的视频,类似酷狗音乐的启动动画一样,非常可观! 2:登录注册界面:输入 ...
php mysql注册登录界面_php实现登录注册界面
php实现登录注册界面首先你要搭建一个自己的数据库我用wamp64创了一个people的数据库具体操作可以参考该搭建链接: 这里就讲下我实现的功能代码: 创建sql.func.php实现一些基本 ...
Android开发：登录/注册界面的编写
目录新建一个空项目(或Activity) 在xml中绘制登录界面关掉ActionBar 运行(最终效果图) 后记在实际开发中,几乎所有的APP都会涉及到用户注册/登录页面的制作,因此本文以And ...
【Vue作业]---Vue登录注册界面
1.引言你是否有过相关设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决 ...

超酷超实用的登录/注册界面，保你看完不后悔（无套路提供源码）

文章目录

概述

效果（背景图片可改变）

代码

index.html

style.css

index.js

background.jpg（可以改，同名）

超酷超实用的登录/注册界面，保你看完不后悔（无套路提供源码）相关推荐

最新文章

热门文章