html+CSS+JavaScript好看又简单的登录界面

我不叫陈二狗

已于 2024-07-16 16:47:07 修改

阅读量224

点赞数 2

文章标签： html css javascript

于 2024-07-16 16:30:03 首次发布

本文链接：https://blog.csdn.net/m0_67444449/article/details/140469860

版权

html好看简单的登录界面演示

html好看的登录界面

在这里插入图片描述

直接上链接吧

html代码如下：

**<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆注册</title>
    <link rel="stylesheet" href="./assets/style.css">
    <link rel="stylesheet" href="./assets/iconfont/iconfont.css">
</head>

<body>
    <div class="container">
        <div class="Miss-cont sign-up">
            <!-- 注册 -->
            <form action="#">
                <h1>用户注册</h1>
                <input type="text" placeholder="账号">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码">
                <input type="email" placeholder="邮箱">
                <button>注册</button>
                <div class="Miss-an">我已有账号， <a class="wap signIn">立即登录</a></div>
            </form>
        </div>

        <!-- 登陆 -->
        <div class="Miss-cont sing-in">
            <form action="#">
                <h1>用户登陆</h1>
                <div class="Miss-social">
                    <a href="#" class="social"><i class="iconfont icon-qq"></i></a>
                    <a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
                    <a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
                    <a href="#" class="social"><i class="iconfont icon-github"></i></a>
                </div>
                <span class="xuanzhe">您可以选择以上几种方式登陆您的账户!</span>
                <input type="text" placeholder="账号">
                <input type="password" placeholder="密码">
                <button>登陆</button>
                <div class="Miss-an">还没有账号？ <a class="wap signUp">立即注册</a></div>
            </form>
        </div>
        
        <!-- 侧边栏内容 -->
        <div class="Miss-aside">
            <div class="aside">
                <div class="aside-panel aside-left">
                    <h1>已有账号?</h1>
                    <p>点我立即登录吧~</p>
                    <a class="ghost signIn">立即登录</a>
                </div>
                <div class="aside-panel aside-right">
                    <h1>没有帐号？</h1>
                    <p>注册一个属于你的账号吧~</p>
                    <a class="ghost signUp">立即注册</a>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./assets/index.js"></script>

</html>**

css代码如下：

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 14px
}

body,html {
	font-family: Arial,Helvetica,sans-serif;
	background: #f8f8f8;
	background-attachment: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: 0 auto;
	font-size: 1rem;
	color: #444
}

h1 {
	margin-bottom: 10px;
	font-size: 20px
}

p {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 100;
	letter-spacing: .1rem
}

.xuanzhe,p {
	margin: 1.2rem 0
}

.xuanzhe {
	font-size: 13px
}

a {
	color: #417dff;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer
}

.container {
	position: relative;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 15px rgba(0,0,0,.20);
	padding: 10px;
	width: 50rem;
	height: 35rem;
	overflow: hidden;
	max-width: 95vw;
	min-height: 65vh
}

.Miss-cont form {
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 0 1.8rem;
	height: 100%;
	justify-content: center;
	align-items: center
}

.Miss-social {
	margin: 10px 0
}

.Miss-social a {
	border: 1px solid #eee;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px;
	height: 1.8rem;
	width: 1.8rem
}

.Miss-social a:hover {
	opacity: .8
}

.Miss-social a i {
	color: #444
}

.Miss-cont input {
	width: 100%;
	height: 2.2rem;
	text-indent: 1rem;
	border: none;
	border-bottom: 1px solid #ccc;
	outline: 0;
	margin: 10px 0;
	font-size: 14px
}

.Miss-cont button:active {
	transform: scale(.95)
}

.Miss-cont button {
	background: #417dff;
	color: #fff;
	border: 1px solid #fff;
	outline: 0;
	cursor: pointer;
	width: 100%;
	border-radius: 4px;
	transition: all .1s ease-in;
	margin: 15px 0;
	font-size: 14px;
	padding: 7px 0
}

button:hover {
	opacity: .8
}

button#send_code {
	width: 100%
}

a.ghost {
	border-radius: 4px;
	transition: all .8s ease-in;
	margin: 10px;
	padding: 4px 15px;
	color: #fff;
	border: 1px solid #fff
}

.Miss-cont {
	position: absolute;
	top: 0;
	height: 100%;
	transition: all .5s ease-in-out
}

.sing-in {
	left: 0;
	width: 50%;
	z-index: 2
}

.sign-up {
	left: 0;
	width: 50%;
	opacity: 0;
	z-index: 1
}

.aside {
	background: #417dff;
	width: 200%;
	height: 100%;
	position: relative;
	left: -100%;
	transition: all .5s ease-in-out;
	color: #fff
}

.Miss-aside {
	right: 0;
	overflow: hidden;
	transition: all .5s ease-in-out;
	z-index: 99
}

.Miss-aside,.aside-panel {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%
}

.aside-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 2.2rem
}

.aside-right {
	right: 0
}

.container.active .Miss-aside {
	transform: translateX(-100%)
}

.container.active .sing-in {
	transform: translateX(100%)
}

.container.active .sign-up {
	transform: translateX(100%);
	opacity: 1;
	z-index: 5;
	transition: all .5s ease-in-out
}

.container.active .aside {
	transform: translateX(50%)
}

.container.active .aside-left {
	transform: translateX(0);
	transition: all .5s ease-in-out
}

.container.active .aside-right {
	transform: translateX(20%);
	transition: all .5s ease-in-out
}

.Miss-an {
	display: none;
	width: 100%;
	margin-top: 20px
}

@media (max-width:768px) {
	html .Miss-aside {
		display: none
	}

	html .sing-in {
		width: 100%
	}

	html .container.active .sign-up.active {
		transform: translateX(0)
	}

	html .sign-up {
		width: 100%
	}

	html .Miss-an {
		display: block;
		width: 100%;
		margin-top: 20px
	}
}

js代码如下：

const containers = document.querySelectorAll('.container');
const signInButtons = document.querySelectorAll('.signIn');
const signUpButtons = document.querySelectorAll('.signUp');
const missElements = document.querySelectorAll('.sign-up');

signUpButtons.forEach(button => {
    button.addEventListener('click', () => {
        containers.forEach(container => {
            container.classList.add('active');
        });

        missElements.forEach(missElement => {
            missElement.classList.add('active');
        });
    });
});

signInButtons.forEach(button => {
    button.addEventListener('click', () => {
        containers.forEach(container => {
            container.classList.remove('active');
        });

        missElements.forEach(missElement => {
            missElement.classList.remove('active');
        });
    });
});