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

HTML+CSS 登陆框动态切换

ops 2025/6/15 12:11:59

展示

在这里插入图片描述

代码

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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="crossorigin="anonymous" referrerpolicy="no-referrer" /><link rel="stylesheet" href="style.css">
</head><body><div class="wrapper"><div class="form-wrapper sign-in"><form action=""><h2>Sign In</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">Sign In</button><div class="signup-link"><p>Don't have an account ?<a href="#" class="signupBtn-link">Sign Up</a></p></div><div class="social-platform"><p>Or sign in with</p><div class="social-icons"><a href="#"><i class="fa-brands fa-alipay"></i></i></a><a href="#"><i class="fa-brands fa-qq"></i></i></a><a href="#"><i class="fa-brands fa-weixin"></i></i></a></div></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 the terms & conditions</label></div><button type="submit">Sign In</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: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}.wrapper {position: relative;width: 400px;height: 500px;background: rgba(255, 255, 255, 0.2);border-radius: 20px;box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);padding: 40px;
}.form-wrapper {display: flex;align-items: center;width: 100%;height: 100%;transition: 1s ease-in-out;
}.wrapper.active .form-wrapper.sign-in{transform: scale(0) translate(-300px, 500px);
}
.wrapper .form-wrapper.sign-up{position: absolute;top: 0;transform: scale(0) translate(200px, -500px);
}.wrapper.active .form-wrapper.sign-up{transform: scale(1) translate(0,0);
}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;/* transform: translateX(-50%); */
}.remember{margin: -15px 0 15 5px;
}.remember label{color: #fff;font-size: 14px;
}.remember label input{ margin-right: 5px;accent-color: #f4157e;
}
button{position: relative;width: 100%;height: 40px;background:#f4157e;color: #fff;cursor: pointer;border-radius: 30px;border: none;outline: none;
}.signup-link{font-size: 14px;text-align: center;margin: 15px 0;color: #fff;
}
.signup-link a{color: #f4157e;text-decoration: none;font-weight: 500;
}
.signup-link a:hover{text-decoration: underline;
}.social-platform{font-size: 14px;color: #fff;text-align: center;
}
.social-icons a{display: inline-block;width: 35px;height: 35px;background: transparent;border: 1px solid #fff;border-radius: 50%;text-align: center;line-height: 35px;margin: 15px 6px 0;transition: 0.3s;
}
.social-icons a:hover{background: #fff;
}.social-icons a i{color: #fff;font-size: 14px;transition: 0.3s;
}
.social-icons a:hover i{color: rgba(0, 0, 0, 0.3)
}

JavaScript

const signupBtnlink = document.querySelector(".signupBtn-link");
const signinBtnlink = document.querySelector(".signinBtn-link");
const wrapper = document.querySelector(".wrapper");signupBtnlink.addEventListener("click", () => {wrapper.classList.toggle("active");
});signinBtnlink.addEventListener("click", () => {wrapper.classList.toggle("active");
});