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

HTML+CSS实现的动态登录界面

news 来源：原创 2025/6/14 14:41:02

摘要

该代码实现了一个动画登录/注册表单切换界面，主要特点包括：

采用HTML5和CSS3构建响应式表单布局
使用CSS动画实现表单切换时的平滑过渡效果
包含登录和注册两个表单，通过JavaScript控制切换

设计亮点包括：

动态模糊和位移动画
自定义属性控制动画延迟(–i/–j)
边框发光效果
响应式布局适配不同设备
表单包含用户名、密码等输入框，并使用了Boxicons图标库增强用户体验。

页面展示

在这里插入图片描述

代码展示

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><link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head><body><div class="wraper"><span class="bg-animate"></span><span class="bg-animate2"></span><div class="form-box login"><h2 class="animation" style="--i:0; --j:21;">Login</h2><form action="#"><div class="input-box animation" style="--i:1; --j:22;"><input type="text" required><label>UserName</label><i class='bx bxs-user'></i></div><div class="input-box animation" style="--i:2; --j:23;"><input type="password" required><label>Password</label><i class='bx bxs-lock-alt'></i></div><button type="submit" class="btn animation" style="--i:3; --j:24;">Login</button><div class="logreg-link animation" style="--i:4; --j:25;"><p>Don't have an account? <a href="#" class="register-link">Sign Up</a></p></div></form></div><div class="info-text login"><h2 class="animation" style="--i:0; --j:20;">Welcome back！</h2><p class="animation" style="--i:1;  --j:21;">Lorem ipsum dolor sit amet consectetur adipisicing.</p></div><div class="form-box register"><h2 class="animation" style="--i:17; --j:0;">Sign Up</h2><form action="#"><div class="input-box animation" style="--i:18; --j:1;"><input type="text" required><label> UserName</label><i class='bx bxs-user'></i></div><div class="input-box animation" style="--i:19; --j:2;"><input type="text" required><label>Email</label><i class='bx bxs-envelope'></i></div><div class="input-box animation" style="--i:20; --j:3;"><input type="password" required><label>Password</label><i class='bx bxs-lock-alt'></i></div><button type="submit" class="btn animation" style="--i:21; --j:4;">Sign Up</button><div class="logreg-link animation" style="--i:22; --j:5;"><p>Already have an account? <a href="#" class="login-link">Login</a></p></div></form></div><div class="info-text register"><h2 class="animation" style="--i:17; --j:0;">Hello Welcome back！</h2><p class="animation" style="--i:18; --j:1;">Lorem ipsum dolor, sit amet consectetur adipisicing.</p></div></div><script src="script.js"></script>
</body></html>

CSS 代码

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Poppins", sans-serif;
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #081b29;
}.wraper {position: relative;width: 750px;height: 450px;background: transparent;border: 2px solid #0ef;box-shadow: 0 0 25px #0ef;overflow: hidden;
}.wraper .form-box {position: absolute;top: 0;width: 50%;height: 100%;/* background: red; */display: flex;flex-direction: column;justify-content: center;
}.wraper .form-box.login {left: 0;padding: 0 60px 0 40px;/* display: none; */
}.wraper .form-box.login .animation {transform: translateX(0);opacity: 1;filter: blur(0);transition: 0.7s ease;transition-delay: calc(0.1s * var(--j));}.wraper.active .form-box.login .animation {transform: translateX(-120%);/* transition: 0.7s ease; */opacity: 0;filter: blur(10px);transition-delay: calc(0.1s * var(--i));
}.wraper .form-box.register {right: 0;padding: 0 40px 0 6%;/* display: none; */pointer-events: none;
}
.wraper.active .form-box.register {pointer-events: auto;
}.wraper .form-box.register .animation {transform: translateX(120%);opacity: 0;filter: blur(10px);transition: 0.7s ease;transition-delay: calc(0.1s * var(--j));
}.wraper.active .form-box.register .animation {transform: translateX(0);opacity: 1;filter: blur(0);transition-delay: calc(0.1s * var(--i));
}.form-box h2 {font-size: 32px;color: #fff;text-align: center;
}.form-box .input-box {position: relative;width: 100%;height: 50px;/* background: seagreen; */margin: 25px 0;
}.input-box input {width: 100%;height: 100%;background: transparent;border: none;outline: none;border-bottom: 2px solid #fff;transition: 0.5s;font-size: 16px;color: #fff;font-weight: 500;padding-right: 23px;
}.input-box input:focus,
.input-box input:valid {border-bottom: #0ef;
}.input-box label {position: absolute;top: 50%;left: 0;transform: translateY(-50%);font-size: 16px;color: #fff;pointer-events: none;transition: 0.5s;
}.input-box input:focus~label,
.input-box input:valid~label {top: -5px;color: #0ef;
}.input-box i {position: absolute;top: 50%;right: 0;transform: translateY(-50%);font-size: 18px;color: #fff;transition: 0.5s;
}.input-box input:focus~i,
.input-box input:valid~i {color: #0ef;
}.btn {position: relative;width: 100%;height: 45px;background: transparent;border: 2px solid #0ef;outline: none;border-radius: 40px;cursor: pointer;font-size: 16px;color: #fff;font-weight: 600;z-index: 1;overflow: hidden;
}.btn:before {top: -100%;left: 0;content: '';position: absolute;width: 100%;height: 300%;background: linear-gradient(#081b29, #0ef, #081b29, #0ef);z-index: -1;transition: 0.5s;
}.btn:hover:before {top: 0;
}.form-box .logreg-link {font-size: 14.5px;color: #fff;text-align: center;margin: 20px 0 10px;
}.logreg-link p a {color: #0ef;text-decoration: none;font-weight: 600;
}.logreg-link p a:hover {text-decoration: underline;
}.wraper .info-text {position: absolute;top: 0;width: 50%;height: 100%;/* background: red; */display: flex;flex-direction: column;justify-content: center;
}.wraper .info-text.login {right: 0;text-align: right;padding: 0 40px 60px 150px;/* display: none; */
}.wraper .info-text.login .animation {transform: translateX(0);opacity: 1;filter: blur(0);transition: 0.7s ease;transition-delay: calc(0.1s * var(--j));}.wraper.active .info-text.login .animation {transform: translateX(120%);/* transition: 0.7s ease; */opacity: 0;filter: blur(10px);transition-delay: calc(0.1s * var(--i));
}.wraper .info-text.register {left: 0;text-align: left;padding: 0 150px 60px 40px;/* display: none; */pointer-events: none;
}
.wraper.active .info-text.register {pointer-events: auto;
}.wraper .info-text.register .animation {transform: translateX(-120%);opacity: 0;filter: blur(10px);transition: 0.7s ease;transition-delay: calc(0.1s * var(--j));
}.wraper.active .info-text.register .animation {transform: translateX(0);opacity: 1;filter: blur(0);transition-delay: calc(0.1s * var(--i));
}.info-text h2 {font-size: 36px;color: #fff;line-height: 1.3;text-transform: uppercase;}.info-text p {font-size: 16px;color: #fff;
}.wraper .bg-animate {position: absolute;top: -4px;right: 0;width: 850px;height: 600px;border-bottom: 3px solid #0ef;background: linear-gradient(45deg, #081b29, #0ef);transform: rotate(10deg) skewY(40deg);/* transform: rotate(0) skewY(0) ; */transform-origin: bottom right;transition: 1.5s ease;transition-delay: 1.6s;
}.wraper.active .bg-animate {transform: rotate(0) skewY(0);transition-delay: 0.5s;
}.wraper .bg-animate2 {position: absolute;top: 100%;left: 250px;width: 850px;height: 700px;background: #081b29;border-top: 3px solid #0ef;/* transform: rotate(-11deg) skewY(-41deg) ; */transform: rotate(0) skewY(0);transform-origin: bottom left;transition: 1.5s ease;transition-delay: 0.5s;
}.wraper.active .bg-animate2 {transform: rotate(-11deg) skewY(-41deg);/* transform: rotate(0) skewY(0); */transition-delay: 1.2s;
}

JavaScript

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