HTML+CSS 动态菜单和登录框

摘要

实现了一个现代化的登录/注册界面，包含导航栏和弹窗表单。

HTML结构采用了响应式设计，包含Logo、导航链接和登录按钮。

CSS样式实现了背景图片、导航栏悬浮效果和表单美化，使用伪元素实现链接下划线动画。

JavaScript实现了弹窗切换功能。

界面整体简洁美观，使用了Ionic图标库增强视觉效果，适合作为网站的用户认证模块。

效果

在这里插入图片描述

代码

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>
</head><body><header><h2 class="logo">Logo</h2><nav class="navigation"><a href="#">Home</a><a href="#">About</a><a href="#">Services</a><a href="#">Contact</a><button class="btnLogin-popup">Login</button></nav></header><div class="wrapper"><span class="icon-close"><ion-icon name="close"></ion-icon></span><div class="form-box login"><h2>Login</h2><div class="input-box"><span class="icon"><ion-icon name="mail"></ion-icon></span><input type="email" required><label>Email</label></div><div class="input-box"><span class="icon"><ion-icon name="lock-closed"></ion-icon></span><input type="password" required><label>Password</label></div><div class="remember-forget"><label for=""><input type="checkbox">Remember me</label><a href="#">Forgot Password</a></label></div><button type="submit" class="btn">Login</button><div class="login-register"><p>Don't have an account? <a href="#" class="register-link">Register</a></p></div></div><div class="form-box register"><h2>Registration</h2><div class="input-box"><span class="icon"><ion-icon name="person"></ion-icon></span><input type="text" required><label>Username</label></div><div class="input-box"><span class="icon"><ion-icon name="mail"></ion-icon></span><input type="email" required><label>Email</label></div><div class="input-box"><span class="icon"><ion-icon name="lock-closed"></ion-icon></span><input type="password" required><label>Password</label></div><div class="remember-forget"><label for=""><input type="checkbox">I agree to the terms & conditions</label></label></div><button type="submit" class="btn">Register</button><div class="login-register"><p>Already have an account? <a href="#" class="login-link">Login</a></p></div></div></div><script src="script.js"></script><!-- https://ionic.io/ionicons --><script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.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: url('bg.jpg') no-repeat;background-size: cover;background-position: center;
}header {position: fixed;top: 0;left: 0;width: 100%;padding: 20px 100px;/* background-color: red; */display: flex;justify-content: space-between;align-items: center;z-index: 99;
}.logo {font-size: 2em;color: #fff;-webkit-user-select: none;user-select: none;
}.navigation a {position: relative;font-size: 1.1em;color: #fff;text-decoration: none;font-weight: 500;margin-left: 40px;
}.navigation a::after {content: '';position: absolute;left: 0;bottom: -6px;width: 100%;height: 3px;background-color: #fff;border-radius: 5px;transform-origin: right;transform: scaleX(0);transition: transform 0.3s ease-in-out;
}.navigation a:hover::after {transform-origin: left;transform: scaleX(1);
}.navigation .btnLogin-popup {width: 130px;height: 50px;background-color: transparent;border: 2px solid #fff;outline: none;border-radius: 6px;cursor: pointer;font-size: 1.1em;color: #fff;font-weight: 500;margin: 0 40px;transition: 0.5s;
}.navigation .btnLogin-popup:hover {background-color: #fff;color: #162938;
}.wrapper {position: relative;width: 400px;height: 440px;background: transparent;border: 2px solid rgba(255, 255, 255, 0.5);border-radius: 20px;-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;overflow: hidden;transform: scale(0);transition: transform 0.5s ease, height 0.2s ease-in-out;
}.wrapper.active-popup{transform: scale(1);
}.wrapper.active{height: 520px;
}.wrapper .icon-close{position: absolute;top: 0;right: 0;width: 45px;height: 45px;background-color: #162938;font-size: 2em;color: #fff;display: flex;justify-content: center;align-items: center;border-bottom-left-radius: 20px;cursor: pointer;z-index: 1;
}.wrapper .form-box {width: 100%;padding: 40px;
}.wrapper .form-box.login{/* display: none; */transition: transform 0.18s ease-in-out;transform: translateX(0);
}
.wrapper.active .form-box.login{/* display: none; */transition: none;transform: translateX(-400px);
}.wrapper .form-box.register{/* display: none; */position: absolute;transition: none;transform: translateX(400px);
}.wrapper.active .form-box.register{/* display: none; */transition: transform 0.18s ease-in-out;transform: translateX(0);
}.wrapper .form-box h2 {font-size: 2em;color: #162938;text-align: center;
}.input-box {position: relative;width: 100%;height: 50px;border-bottom: 2px solid #162938;margin: 30px 0;
}.input-box label {position: absolute;top: 50%;left: 5px;transform: translateY(-50%);font-size: 1em;color: #162938;font-weight: 500;pointer-events: none;transition: .5s;
}.input-box input:focus~label,
.input-box input:valid~label {top: -5px;
}.input-box input {width: 100%;height: 100%;background: transparent;border: none;outline: none;font-size: 1em;color: #162938;font-weight: 600;padding: 0 35px 0 5px;
}.input-box .icon {position: absolute;right: 8px;font-size: 1.2em;color: #162938;line-height: 57px;
}.remember-forget {font-size: 0.9em;color: #162938;font-weight: 500;margin: -25px 0 15px;display: flex;justify-content: space-between;
}.remember-forget label input {accent-color: #162938;margin: 0 5px 0 0;
}.remember-forget a {color: #162938;text-decoration: none;
}.remember-forget a:hover {text-decoration: underline;
}.btn {width: 100%;height: 45px;background-color: #162938;border: none;outline: none;border-radius: 6px;cursor: pointer;font-size: 1em;color: #fff;font-weight: 500;
}.login-register{font-size: 0.9em;color: #162938;text-align: center;font-weight: 500;margin: 25px 0 10px ;
}
.login-register a{color: #162938;text-decoration: none;font-weight: 600;
}
.login-register a:hover{text-decoration: underline;
}

JavaScript

const wrapper = document.querySelector('.wrapper');
const loginLink = document.querySelector('.login-link');
const registerLink = document.querySelector('.register-link');
const btnPopup = document.querySelector('.btnLogin-popup');
const iconClose = document.querySelector('.icon-close');registerLink.addEventListener('click', () => {wrapper.classList.add('active');
});loginLink.addEventListener('click', () => {wrapper.classList.remove('active');
});
btnPopup.addEventListener('click', () => {wrapper.classList.add('active-popup');
});
iconClose.addEventListener('click', () => {wrapper.classList.remove('active-popup');
});