高科技风格的登录/注册界面源码详解
本文为您介绍一个高科技风格的登录/注册界面，具有自适应效果、渐变配色和简洁的布局，并支持切换登录和注册界面。本文还提供完整源码和演示链接，帮助您快速集成到项目中。
一、项目概述
该界面包含登录和注册两个模块，切换特效平滑自然，布局经过美化，使用渐变背景、高科技风配色、图标装饰等设计，适用于现代化项目。
二、源码展示
以下是登录/注册界面的完整HTML和CSS代码，可以直接复制到项目中使用。
HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录/注册 - 高科技风格</title>
<style>
/ 重置基础样式 /
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #141e30, #243b55);
color: #fff;
overflow: hidden;
}
.container {
position: relative;
width: 360px;
max-width: 100%;
border-radius: 10px;
overflow: hidden;
transition: transform 0.6s ease-in-out;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.6);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
padding: 2rem;
text-align: center;
}
h2 {
font-size: 1.6rem;
color: #00c6ff;
margin-bottom: 1rem;
}
.input-group {
position: relative;
margin: 1rem 0;
}
.input-group input {
width: 100%;
padding: 12px 20px 12px 40px;
border: none;
outline: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 1rem;
transition: background 0.3s ease;
}
.input-group input:focus {
background: rgba(255, 255, 255, 0.3);
}
.input-group .icon {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
color: #00c6ff;
font-size: 1.2rem;
}
.btn {
width: 100%;
padding: 12px;
margin-top: 1rem;
border: none;
border-radius: 5px;
background: linear-gradient(90deg, #00c6ff, #0072ff);
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
.btn:hover {
background: linear-gradient(90deg, #0072ff, #00c6ff);
}
.toggle-btn {
margin-top: 1rem;
font-size: 0.9rem;
cursor: pointer;
color: #00c6ff;
text-decoration: underline;
}
.footer {
font-size: 0.8rem;
color: #aaa;
margin-top: 1.5rem;
}
/ 切换动画 /
.register-container {
display: none;
}
.show-register .login-container {
display: none;
}
.show-register .register-container {
display: block;
}
/ 自适应 /
@media (max-width: 480px) {
.container {
padding: 1.5rem;
width: 90%;
}
}
</style>
<!-- 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/kMVqU/1P4K8kjyZOH3I1b6WbbFk7bG4HbP1ttUKv9e8sF6n5gG8a5Zl5A5ZRmGTH+xjJ8k4gk5nkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- 登录界面 -->
<div class="container login-container" id="login-container">
<h2>用户登录</h2>
<form>
<div class="input-group">
<i class="fas fa-user icon"></i>
<input type="text" id="login-username" placeholder="用户名">
</div>
<div class="input-group">
<i class="fas fa-lock icon"></i>
<input type="password" id="login-password" placeholder="密码">
</div>
<button type="submit" class="btn">登录</button>
</form>
<div class="toggle-btn" onclick="toggleForm()">没有账户？点击注册</div>
<div class="footer">© 2024 滴智科技</div>
</div>
<!-- 注册界面 -->
<div class="container register-container" id="register-container">
<h2>用户注册</h2>
<form>
<div class="input-group">
<i class="fas fa-user icon"></i>
<input type="text" id="register-username" placeholder="用户名">
</div>
<div class="input-group">
<i class="fas fa-envelope icon"></i>
<input type="email" id="register-email" placeholder="邮箱">
</div>
<div class="input-group">
<i class="fas fa-lock icon"></i>
<input type="password" id="register-password" placeholder="密码">
</div>
<button type="submit" class="btn">注册</button>
</form>
<div class="toggle-btn" onclick="toggleForm()">已有账户？点击登录</div>
<div class="footer">© 2024 滴智科技</div>
</div>
<script>
function toggleForm() {
document.body.classList.toggle("show-register");
}
</script>
</body>
</html>源码下载链接：
希望这个示例能帮助您更轻松地实现一个现代化的登录/注册界面！
解压密码：
www.fulicode.cn
评论 (0)