当前位置：首页 > news >正文

HTML+CSS 实现注册登录切换效果

news 来源：原创 2025/6/15 6:55:34

简介

该代码实现了一个响应式、视觉现代的登录注册页面。主要特点包括：

页面布局：顶部固定导航栏，包含搜索框和菜单项；主体分为欢迎内容和登录/注册表单区域。

交互功能：支持登录和注册表单切换，包含基本的表单验证功能。

视觉设计：使用CSS实现渐变背景、浮动动画效果和图标化输入框。

技术特点：

使用Boxicons图标库
响应式布局设计
表单切换的JavaScript交互
视觉过渡效果

页面整体风格现代简洁，适合作为各类网站的登录入口。

效果

在这里插入图片描述

代码实现

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"></meta><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css"><link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head><body><header class="header"><nav class="navbar"><a href="#">Home</a><a href="#">About</a><a href="#">Services</a><a href="#">Contract</a></nav><form action="#" class="search-bar"><input type="text" placeholder="Search..."><button type="submit"><i class='bx bx-search'></i></button></form></header><div class="background"></div><div class="container"><div class="content"><h2 class="logo"><i class='bx bxl-firebase'></i> Zmrbak</h2><div class="text-sci"><h2>Welcome!<br><span>To Our new website.</span></h2><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, incidunt?</p><div class="socal-icons"><a href=""><i class='bx bxl-linkedin'></i></a><a href=""><i class='bx bxl-facebook'></i></a><a href=""><i class='bx bxl-google'></i></a><a href=""><i class='bx bxl-instagram'></i></a></div></div></div><div class="logreg-box"><div class="form-box login"><form action="#"><h2>Sign In</h2><div class="input-box"><span class="icon"><i class='bx bxs-envelope'></i></span><input type="email" required><label>Email</label></div><div class="input-box"><span class="icon"><i class='bx bxs-lock-alt'></i></span><input type="password" required><label>password</label></div><div class="remember-forgot"><label><input type="checkbox">Remember me</label><a href="#">Forgot Password</a></div><button type="submit" class="btn">Sign In</button><div class="login-register"><p>Don't have an account? <a href="#" class="register-link">Sign Up</a></p></div></form></div><div class="form-box register"><form action="#"><h2>Sign Up</h2><div class="input-box"><span class="icon"><i class='bx bxs-user' ></i></i></span><input type="text" required><label>Name</label></div><div class="input-box"><span class="icon"><i class='bx bxs-envelope'></i></span><input type="email" required><label>Email</label></div><div class="input-box"><span class="icon"><i class='bx bxs-lock-alt'></i></span><input type="password" required><label>password</label></div><div class="remember-forgot"><label><input type="checkbox">I agree the terms & conditions</label></div><button type="submit" class="btn">Sign Up</button><div class="login-register"><p>Already have an account? <a href="#" class="login-link">Sign In</a></p></div></form></div></div></div><script src="script.js"></script>
</body></html>

CSS

* {margin: 0;padding: 0;box-sizing: border-box;
}body {background: #020410;
}.header {position: fixed;top: 0;left: 0;width: 100%;padding: 25px 12.5%;/* background-color: yellowgreen; */background: transparent;display: flex;justify-content: space-between;align-items: center;z-index: 100;
}.navbar a {position: relative;font-size: 16px;color: #e4e4e4;text-decoration: none;font-weight: 500;margin: 30px;
}.navbar a::after {content: "";position: absolute;left: 0;width: 100%;height: 2px;background: #e4e4e4;border-radius: 5px;bottom: -6px;transform: translateY(10px);opacity: 0;transition: 0.5s;
}.navbar a:hover::after {transform: translateY(0);opacity: 1;
}.search-bar {width: 250px;height: 45px;background: transparent;border: 2px solid #e4e4e4;border-radius: 6px;display: flex;align-items: center;
}.search-bar input {width: 100%;background: transparent;outline: none;border: none;color: #e4e4e4;font-size: 16px;padding: 10px;
}.search-bar input::placeholder {color: #e4e4e4;
}.search-bar button {width: 40px;height: 100%;background: transparent;border: none;outline: none;display: flex;justify-content: center;align-items: center;cursor: pointer;
}.search-bar button i {font-size: 22px;color: #e4e4e4;
}.background {width: 100%;height: 100vh;background: url('bg.jpg') no-repeat;background-position: center;background-size: cover;filter: blur(5px);
}.container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1000px;height: 550px;background: url('bg.jpg') no-repeat;background-position: center;background-size: cover;border-radius: 10px;margin: 20px;/* filter: hue-rotate(30deg); *//* filter: brightness(50%) contrast(150%); */
}.container .content {position: absolute;top: 0;left: 0;width: 58%;height: 100%;/* background: yellowgreen; */padding: 80px;color: #e4e4e4;display: flex;justify-content: space-between;flex-direction: column;}.content .logo {font-size: 30px;
}.text-sci h2 {font-size: 40px;line-height: 1;
}.text-sci h2 span {font-size: 25px;
}.text-sci p {font-size: 16px;margin: 20px 0;
}.socal-icons a i {font-size: 22px;color: #e4e4e4;margin: 10px;transition: 0.5s ease;
}.socal-icons a:hover i {transform: scale(1.2);
}.container .logreg-box {position: absolute;top: 0;right: 0;width: calc(100% - 58%);height: 100%;/* background:red; */overflow: hidden;
}.logreg-box .form-box {position: absolute;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: transparent;-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);border-top-right-radius: 10px;border-bottom-right-radius: 10px;color: #e4e4e4
}
.logreg-box .form-box.login{transform: translateX(0);transition: transform 0.6s ease;transition-delay: 0.7s;
}
.logreg-box.active .form-box.login{transform: translateX(430px);transition-delay: 0s;
}.logreg-box .form-box.register{transform: translateX(430px);transition: transform 0.6s ease;transition-delay: 0s;
}
.logreg-box.active .form-box.register{transform: translateX(0);transition-delay: 0.7s;
}.form-box h2 {font-size: 32px;text-align: center;
}.form-box .input-box {position: relative;width: 340px;height: 50px;border-bottom: 2px solid #e4e4e4;margin: 30px 0;
}.input-box input {width: 100%;height: 100%;border: none;outline: none;background: transparent;font-size: 16px;color: #e4e4e4;font-weight: 500;padding-right: 28px;
}.input-box label {position: absolute;top: 50%;left: 0;transform: translateY(-50%);font-size: 16px;font-weight: 500;pointer-events: none;transition: 0.5s ease;
}.input-box input:focus~label,
.input-box input:valid~label {top: -5px;
}.input-box .icon {position: absolute;top: 13px;right: 0;font-size: 19px;
}.form-box .remember-forgot {font-size: 14.5px;font-weight: 500;margin: -15px 0 15px;display: flex;justify-content: space-between;
}.remember-forgot label input {accent-color: #e4e4e4;margin-right: 4px;
}.remember-forgot a {color: #e4e4e4;text-decoration: none;
}.remember-forgot a:hover {text-decoration: underline;
}.btn {width: 100%;height: 45px;background-color: #c4103d;border: none;outline: none;border-radius: 4px;cursor: pointer;font-size: 16px;font-weight: 600;color: #e4e4e4;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}.form-box .login-register {font-size: 14.5px;font-weight: 500;text-align: center;margin-top: 25px;
}.login-register p a {color: #e4e4e4;font-weight: 600;text-decoration: none;
}.login-register p a:hover {text-decoration: underline;
}

JavaScript

const logregBox = document.querySelector('.logreg-box');
const loginLink = document.querySelector('.login-link');
const registerLink = document.querySelector('.register-link');registerLink.addEventListener('click', () => {logregBox.classList.add('active');
});loginLink.addEventListener('click', () => {logregBox.classList.remove('active');
});