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

HTML+CSS 动态背景动态登录注册框

news 来源：原创 2025/6/15 8:01:32

简介

这是一款炫酷的登录/注册表单界面设计。

主要特点包括：

黑色背景搭配霓虹蓝光效果的表单容器，
鼠标悬停时会有彩色光晕动画；
表单包含登录和注册两个页面，通过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">
</head><body><div class="wrapper"><div class="form-wrapper sign-in"><form action=""><h2>Login</h2><div class="input-group"><input type="text" required><label>Username</label></div><div class="input-group"><input type="password" required><label>Password</label></div><div class="remember"><label><input type="checkbox"> Remember me</label></div><button type="submit">Login</button><div class="signUp-link"><p>Don't have an account? <a href="#" class="signUpBtn-link">Sign Up</a></p></div></form></div><div class="form-wrapper sign-up"><form action=""><h2>Sign Up</h2><div class="input-group"><input type="text" required><label>Username</label></div><div class="input-group"><input type="email" required><label>Email</label></div><div class="input-group"><input type="password" required><label>Password</label></div><div class="remember"><label><input type="checkbox"> I agree to terms & conditions</label></div><button type="submit">Sign Up</button><div class="signUp-link"><p>Already have an account? <a href="#" class="signInBtn-link">Sign In</a></p></div></form></div></div><script src="script.js"></script>
</body></html>

CSS

* {margin: 0;padding: 0;box-sizing: border-box;
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #000;
}.wrapper {position: relative;width: 400px;height: 500px;/* background: #0ef; */background: black;box-shadow: 0 0 50px #0ef;border-radius: 20px;padding: 40px;overflow: hidden;
}
.wrapper:hover{animation: animate 2s linear infinite;
}@keyframes animate {100%{filter: hue-rotate(360deg);}
}.form-wrapper {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;transition: 1s ease-in-out;
}.wrapper.active .form-wrapper.sign-in{transform: translateY(-450px);
}.wrapper .form-wrapper.sign-in{position: absolute;top: 450px;left: 0;/* transform: translateY(0); */
}
.wrapper.active .form-wrapper.sign-up{transform: translateY(-450px);
}.form-wrapper h2{font-size: 30px;color: #fff;text-align: center;
}.input-group{position: relative;margin: 30px 0;border-bottom: 2px solid #fff;
}.input-group label{ position: absolute;top: 50%;left: 5px;transform: translateY(-50%);font-size: 16px;color: #fff;pointer-events: none;transition: 0.5s;
}.input-group input{width: 320px;height: 40px;font-size: 16px;color: #fff;padding: 0 5px;background: transparent;border: none;outline: none;
}.input-group input:focus ~ label,
.input-group input:valid ~ label{ top: -5px;
}.remember{margin: -5px 0 15px 5px;
}
.remember label{color: #fff;font-size: 14px;
}
.remember input{accent-color: #0ef;
}
button{ position: relative;width: 100%;height: 40px;background-color: #0ef;box-shadow: 0 0 10px #0ef;font-size: 16px;cursor: pointer;border-radius: 30px;border: none;outline: none;
}.signUp-link{font-size: 14px;text-align: center;margin: 15px 0;
}
.signUp-link p{color: #fff;
}
.signUp-link a{color: #0ef;text-decoration: none;font-weight: 500;
}
.signUp-link a:hover{text-decoration: underline;
}

JavaScript

const signInBtnLink  = document.querySelector(".signInBtn-link");
const signUpBtnLink  = document.querySelector(".signUpBtn-link");
const wrapper        = document.querySelector(".wrapper");signUpBtnLink.addEventListener("click", () => {wrapper.classList.toggle("active");
});signInBtnLink.addEventListener("click", () => {wrapper.classList.toggle("active");
});