代码算是完整的，
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云绵登录</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
}
html, body {
height: 100%;
background: linear-gradient(135deg, #d1e9ff 0%, #e6f3ff 100%);
position: relative;
overflow-x: hidden;
}
body {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
position: relative;
}
/* 云朵背景效果 - 不会限制滚动 */
.cloud-bg {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
}
.cloud {
position: absolute;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
filter: blur(15px);
animation: float 25s infinite linear;
}
.cloud-1 { width: 200px; height: 80px; top: 15%; left: 10%; }
.cloud-2 { width: 250px; height: 100px; top: 30%; right: 15%; animation-duration: 30s; }
.cloud-3 { width: 170px; height: 70px; bottom: 25%; left: 20%; animation-duration: 35s; }
.cloud-4 { width: 220px; height: 90px; bottom: 10%; right: 10%; animation-duration: 28s; }
.cloud-5 { width: 180px; height: 60px; top: 45%; right: 20%; animation-duration: 33s; }
.cloud-6 { width: 160px; height: 65px; bottom: 40%; left: 30%; animation-duration: 27s; }
.login-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
box-shadow: 0 15px 40px rgba(173, 216, 230, 0.3);
width: 100%;
max-width: 420px;
max-height: 90vh;
padding: 45px 40px;
position: relative;
text-align: center;
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.5);
transition: transform 0.4s ease, box-shadow 0.4s ease;
overflow-y: auto; /* 确保容器内部可滚动 */
-webkit-overflow-scrolling: touch; /* iOS滑动更流畅 */
}
/* 自定义滚动条样式 */
.login-container::-webkit-scrollbar {
width: 8px;
}
.login-container::-webkit-scrollbar-track {
background: rgba(210, 230, 255, 0.3);
border-radius: 10px;
}
.login-container::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #80ccff, #4a96ff);
border-radius: 10px;
}
.login-container:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(135, 206, 235, 0.45);
}
/* 云绵风格Logo设计 */
.cloud-logo {
width: 130px;
height: 130px;
margin: 0 auto 20px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.cloud-shape {
position: relative;
width: 100px;
height: 100px;
background: linear-gradient(135deg, #80ccff 0%, #4a96ff 100%);
border-radius: 50%;
box-shadow: 0 8px 20px rgba(26, 127, 255, 0.35);
transition: all 0.4s ease;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.cloud-icon {
font-size: 52px;
color: white;
text-shadow: 0 2px 5px rgba(0, 80, 165, 0.3);
transition: all 0.4s ease;
}
.cloud-puff {
position: absolute;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
filter: blur(8px);
z-index: 1;
opacity: 0.85;
}
.puff-1 { width: 45px; height: 45px; top: -12px; right: 10px; animation: puff 7s infinite ease-in-out; }
.puff-2 { width: 38px; height: 38px; top: 45px; left: -10px; animation: puff 6s 0.5s infinite ease-in-out; }
.puff-3 { width: 42px; height: 42px; bottom: -8px; right: 35px; animation: puff 8s 1s infinite ease-in-out; }
h1 {
font-size: 36px;
margin: 10px 0 30px;
font-weight: 700;
letter-spacing: 1px;
position: relative;
background: linear-gradient(45deg, #287ae6, #5ab6ff, #a2d9ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 8px rgba(135, 206, 235, 0.2);
padding-bottom: 8px;
}
h1::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: linear-gradient(to right, #a2d9ff, #5ab6ff, #a2d9ff);
border-radius: 2px;
opacity: 0.8;
}
.input-group {
margin-bottom: 22px;
position: relative;
}
.input-group input {
width: 100%;
padding: 16px 25px 16px 55px;
border: 2px solid #d0eaff;
border-radius: 16px;
font-size: 16px;
transition: all 0.3s ease;
outline: none;
background: rgba(245, 250, 255, 0.85);
color: #0050a7;
box-shadow: inset 0 2px 5px rgba(173, 216, 230, 0.25);
}
.input-group input:focus {
border-color: #80c0ff;
box-shadow: 0 0 0 4px rgba(140, 200, 255, 0.25),
inset 0 2px 5px rgba(173, 216, 230, 0.3);
background: white;
}
.input-group input::placeholder {
color: #79b1ff;
font-weight: 300;
letter-spacing: 0.5px;
}
.input-icon {
position: absolute;
left: 25px;
top: 50%;
transform: translateY(-50%);
color: #1a7fff;
font-size: 22px;
transition: all 0.3s ease;
}
.input-group input:focus ~ .input-icon {
transform: translateY(-50%) scale(1.15);
}
.remember-group {
display: flex;
justify-content: space-between;
margin: 20px 0 30px;
font-size: 15px;
}
.remember-me {
display: flex;
align-items: center;
cursor: pointer;
color: #287ae6;
}
.remember-me input {
margin-right: 8px;
cursor: pointer;
accent-color: #1a7fff;
width: 18px;
height: 18px;
}
.forgot-password {
color: #1a7fff;
text-decoration: none;
position: relative;
padding: 0 2px;
transition: all 0.3s;
font-weight: 500;
}
.forgot-password:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(to right, #5ab6ff, #1a7fff);
transition: width 0.3s ease;
}
.forgot-password:hover:after {
width: 100%;
}
.login-btn {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #1a7fff 0%, #0a65e3 100%);
background-size: 200% auto;
border: none;
border-radius: 16px;
color: white;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.4s ease;
box-shadow: 0 8px 25px rgba(26, 127, 255, 0.5);
position: relative;
overflow: hidden;
z-index: 1;
letter-spacing: 1.5px;
}
.login-btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0a65e3 0%, #1a7fff 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.login-btn:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(26, 127, 255, 0.65);
background-position: right center;
}
.login-btn:hover:before {
opacity: 1;
}
.login-btn:active {
transform: translateY(0);
box-shadow: 0 5px 20px rgba(26, 127, 255, 0.45);
}
.divider {
display: flex;
align-items: center;
margin: 35px 0;
color: #70a7ff;
font-size: 15px;
position: relative;
font-weight: 500;
letter-spacing: 0.5px;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 2px;
background: linear-gradient(to right, transparent, #a2d2ff, transparent);
}
.divider::before {
margin-right: 20px;
}
.divider::after {
margin-left: 20px;
}
.other-options {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 30px;
}
.option-btn {
width: 65px;
height: 65px;
border-radius: 50%;
background: rgba(240, 248, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #1a7fff;
transition: all 0.3s ease;
cursor: pointer;
border: 2px solid rgba(173, 216, 230, 0.6);
backdrop-filter: blur(4px);
box-shadow: 0 5px 15px rgba(173, 216, 230, 0.4);
position: relative;
overflow: hidden;
}
.option-btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), transparent);
opacity: 0.7;
z-index: 1;
}
.option-btn i {
position: relative;
z-index: 2;
}
.option-btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(90, 182, 255, 0.6);
border-color: #80c0ff;
background: rgba(255, 255, 255, 0.95);
color: #0a65e3;
}
.register {
text-align: center;
font-size: 15px;
color: #287ae6;
font-weight: 500;
}
.register a {
color: #0a65e3;
text-decoration: none;
font-weight: 700;
position: relative;
padding: 0 2px;
}
.register a:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(to right, #5ab6ff, #1a7fff);
transition: width 0.3s ease;
}
.register a:hover:after {
width: 100%;
}
.hint {
color: #ff3366;
font-size: 14px;
margin-top: 5px;
text-align: left;
padding-left: 55px;
height: 20px;
opacity: 0;
transition: opacity 0.3s;
}
/* 其他选项内容 */
.options-content {
margin-bottom: 30px;
padding: 20px;
background: rgba(240, 248, 255, 0.5);
border-radius: 16px;
}
.options-content p {
margin-bottom: 15px;
color: #0050a7;
line-height: 1.6;
}
.options-content ul {
text-align: left;
padding-left: 25px;
}
.options-content li {
margin-bottom: 10px;
color: #0050a7;
}
@media (max-width: 500px) {
.login-container {
padding: 35px 25px;
max-width: 95%;
}
.cloud-logo {
width: 100px;
height: 100px;
}
.cloud-shape {
width: 90px;
height: 90px;
}
.cloud-icon {
font-size: 46px;
}
h1 {
font-size: 32px;
}
}
/* 动画效果 */
@keyframes float {
0% { transform: translateX(0) translateY(0); }
25% { transform: translateX(-15px) translateY(-5px); }
50% { transform: translateX(10px) translateY(3px); }
75% { transform: translateX(-8px) translateY(-3px); }
100% { transform: translateX(0) translateY(0); }
}
@keyframes puff {
0%, 100% { transform: translate(0, 0); opacity: 0.85; }
50% { transform: translate(5px, -6px); opacity: 0.95; filter: blur(5px); }
}
.slide-in {
animation: slideIn 0.8s ease-out forwards;
}
@keyframes slideIn {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.fade-in {
animation: fadeIn 0.8s ease-out forwards;
animation-delay: 0.3s;
opacity: 0;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.bounce {
animation: bounce 0.5s ease;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
10%, 90% { transform: translateX(-3px); }
20%, 80% { transform: translateX(5px); }
30%, 50%, 70% { transform: translateX(-10px); }
40%, 60% { transform: translateX(10px); }
}
.glow {
animation: glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow {
from {
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #1a7fff, 0 0 20px #1a7fff;
}
to {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #1a7fff, 0 0 40px #1a7fff;
}
}
/* 弹窗样式 */
.modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
overflow: auto;
animation: fadeIn 0.3s;
}
.modal-content {
position: relative;
background: white;
margin: 15% auto;
padding: 30px;
border-radius: 20px;
width: 85%;
max-width: 600px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
animation: slideIn 0.4s;
}
.close {
position: absolute;
right: 25px;
top: 15px;
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s;
}
.close:hover {
color: #333;
}
</style>
</head>
<body>
<div class="cloud-bg">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
<div class="cloud cloud-4"></div>
<div class="cloud cloud-5"></div>
<div class="cloud cloud-6"></div>
</div>
<div class="login-container">
<div class="cloud-logo slide-in">
<div class="cloud-shape">
<i class="fas fa-cloud cloud-icon"></i>
</div>
<div class="cloud-puff puff-1"></div>
<div class="cloud-puff puff-2"></div>
<div class="cloud-puff puff-3"></div>
</div>
<h1 class="fade-in">云绵登录</h1>
<div class="input-group fade-in">
<i class="fas fa-user input-icon"></i>
<input type="text" id="username" placeholder="用户名" autocomplete="off">
<div class="hint" id="username-hint"></div>
</div>
<div class="input-group fade-in">
<i class="fas fa-lock input-icon"></i>
<input type="password" id="password" placeholder="密码">
<div class="hint" id="pw-hint"></div>
</div>
<div class="remember-group fade-in">
<label class="remember-me">
<input type="checkbox" id="remember-me">
记住密码
</label>
<a href="forgot_password.html" class="forgot-password">忘记密码？</a>
</div>
<button class="login-btn fade-in" id="loginBtn">登 录</button>
<div class="divider fade-in">或使用以下方式登录</div>
<div class="other-options fade-in">
<a href="wechat_login.html" class="option-btn" id="wechatLogin" title="微信登录">
<i class="fab fa-weixin"></i>
</a>
<a href="qrcode_login.html" class="option-btn glow" id="qrcodeLogin" title="扫码登录">
<i class="fas fa-qrcode"></i>
</a>
<a href="phone_login.html" class="option-btn" id="phoneLogin" title="手机号登录">
<i class="fas fa-mobile-alt"></i>
</a>
</div>
<!-- 云绵特色功能简介 -->
<div class="options-content fade-in">
<h2>云绵特色功能</h2>
<p>云绵提供了前所未有的云端体验，让您在任何设备上都能无缝访问数据和服务</p>
<ul>
<li>智能云存储：无限空间，自动同步所有设备</li>
<li>隐私保障：端到端加密保护您的所有文件</li>
<li>无缝协作：团队成员实时共享文档并协同编辑</li>
<li>云AI助手：智能整理、分析和推荐您的文件</li>
</ul>
</div>
<div class="register fade-in">
还没有云绵账号？ <a href="register.html" id="registerLink">立即注册</a>
</div>
</div>
<!-- 临时弹窗，用于显示功能页面占位 -->
<div id="featureModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2 id="modalTitle">功能页面</h2>
<div id="modalContent" style="padding: 20px 0; line-height: 1.6;">
<!-- 这里会动态插入内容 -->
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 创建背景云朵
const cloudsContainer = document.querySelector('.cloud-bg');
for (let i = 0; i < 12; i++) {
const cloud = document.createElement('div');
cloud.className = `cloud cloud-${i+1}`;
cloud.style.width = `${150 + Math.random() * 100}px`;
cloud.style.height = `${50 + Math.random() * 50}px`;
cloud.style.top = `${Math.random() * 100}%`;
cloud.style.left = `${Math.random() * 100}%`;
cloud.style.animationDelay = `${Math.random() * 15}s`;
cloud.style.animationDuration = `${20 + Math.random() * 30}s`;
cloudsContainer.appendChild(cloud);
}
// 输入验证和提示
const usernameInput = document.getElementById('username');
const pwInput = document.getElementById('password');
const usernameHint = document.getElementById('username-hint');
const pwHint = document.getElementById('pw-hint');
usernameInput.addEventListener('input', function() {
if(this.value.trim().length < 3) {
usernameHint.textContent = '用户名长度应在3位以上';
usernameHint.style.opacity = '1';
} else if(this.value.length > 16) {
usernameHint.textContent = '用户名长度不能超过16位';
usernameHint.style.opacity = '1';
} else {
usernameHint.style.opacity = '0';
}
});
pwInput.addEventListener('input', function() {
if(this.value.length < 6) {
pwHint.textContent = '密码长度应在6位以上';
pwHint.style.opacity = '1';
} else if(this.value.length > 16) {
pwHint.textContent = '密码长度不能超过16位';
pwHint.style.opacity = '1';
} else {
pwHint.style.opacity = '0';
}
});
// 登录按钮动画
const loginBtn = document.getElementById('loginBtn');
loginBtn.addEventListener('click', function() {
const username = usernameInput.value.trim();
const password = pwInput.value;
if (!username) {
usernameHint.textContent = '请输入用户名';
usernameHint.style.opacity = '1';
shakeElement(usernameInput);
return;
}
if (!password) {
pwHint.textContent = '请输入密码';
pwHint.style.opacity = '1';
shakeElement(pwInput);
return;
}
if(usernameHint.style.opacity === '1' || pwHint.style.opacity === '1') {
return;
}
// 添加加载效果
loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
loginBtn.disabled = true;
// 添加云绵波动效果
document.querySelectorAll('.cloud-puff').forEach(puff => {
puff.style.animation = 'none';
setTimeout(() => {
puff.style.animation = '';
}, 100);
});
// 模拟登录过程
setTimeout(function() {
loginBtn.innerHTML = '<i class="fas fa-check"></i> 登录成功';
loginBtn.style.background = 'linear-gradient(135deg, #00c853 0%, #009624 100%)';
// 背景云彩加速
document.querySelectorAll('.cloud').forEach(cloud => {
const duration = parseFloat(getComputedStyle(cloud).animationDuration);
cloud.style.animationDuration = (duration/2) + 's';
});
setTimeout(function() {
// 跳转到登录后页面
loginBtn.innerHTML = '正在跳转...';
setTimeout(function() {
showModal('登录成功', '欢迎进入云绵控制面板！您可以使用云存储、文件同步和团队协作功能。<br><br><button style="background: #4a96ff; color: white; border: none; padding: 10px 20px; border-radius: 10px; margin-top: 15px; cursor: pointer;">进入控制面板</button>');
}, 800);
}, 1200);
}, 1800);
});
// 图标悬停动画
const cloudLogo = document.querySelector('.cloud-logo');
cloudLogo.addEventListener('mouseenter', function() {
this.querySelector('.cloud-shape').style.transform = 'scale(1.1) rotate(5deg)';
this.querySelector('.cloud-icon').style.transform = 'scale(1.2)';
});
cloudLogo.addEventListener('mouseleave', function() {
this.querySelector('.cloud-shape').style.transform = 'scale(1) rotate(0)';
this.querySelector('.cloud-icon').style.transform = 'scale(1)';
});
// 弹窗控制
const modal = document.getElementById('featureModal');
const modalTitle = document.getElementById('modalTitle');
const modalContent = document.getElementById('modalContent');
const closeBtn = document.querySelector('.close');
closeBtn.addEventListener('click', function() {
modal.style.display = 'none';
});
window.addEventListener('click', function(e) {
if (e.target === modal) {
modal.style.display = 'none';
}
});
// 其他功能页面链接处理
document.querySelectorAll('.forgot-password, #registerLink, .option-btn').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
let title, content;
switch(this.getAttribute('href')) {
case 'register.html':
title = '创建云绵账号';
content = '欢迎加入云绵，填写以下信息开始使用我们的服务：<br><form style="text-align:left; margin-top: 15px;"><label>用户名：<br><input type="text" style="width:100%; padding:10px; border-radius:10px; border:1px solid #d0eaff; margin:8px 0 15px;"></label><label>邮箱：<br><input type="email" style="width:100%; padding:10px; border-radius:10px; border:1px solid #d0eaff; margin:8px 0 15px;"></label><label>设置密码：<br><input type="password" style="width:100%; padding:10px; border-radius:10px; border:1px solid #d0eaff; margin:8px 0 15px;"></label><label>确认密码：<br><input type="password" style="width:100%; padding:10px; border-radius:10px; border:1px solid #d0eaff; margin:8px 0 15px;"></label><button type="submit" style="background:#4a96ff; color:white; border:none; padding:12px 25px; border-radius:10px; font-size:16px; cursor:pointer;">创建账号</button></form>';
break;
case 'forgot_password.html':
title = '重置密码';
content = '请输入您的邮箱地址，我们会发送重置密码的链接：<br><form style="text-align:left; margin-top: 15px;"><label>邮箱：<br><input type="email" style="width:100%; padding:10px; border-radius:10px; border:1px solid #d0eaff; margin:8px 0 15px;"></label><button type="submit" style="background:#4a96ff; color:white; border:none; padding:12px 25px; border-radius:10px; font-size:16px; cursor:pointer;">发送重置链接</button></form><div style="margin-top:20px;">或者 <a href="#" style="color:#4a96ff;">使用安全问题重置</a></div>';
break;
case 'wechat_login.html':
title = '微信登录';
content = '请使用微信扫描二维码登录云绵账号：<div style="text-align:center; margin:25px 0;"><div style="display:inline-block; width:180px; height:180px; background:#f1f8ff; display:flex; align-items:center; justify-content:center; border-radius:15px;"><i class="fab fa-weixin" style="font-size: 100px; color:#1a7fff; opacity:0.8;"></i></div><p style="margin-top:15px; color:#666;">打开微信，扫一扫登录</p></div>';
break;
case 'qrcode_login.html':
title = '扫码登录';
content = '请使用云绵APP扫描二维码登录：<div style="text-align:center; margin:25px 0;"><div style="display:inline-block; width:180px; height:180px; background:#f1f8ff; display:flex; align-items:center; justify-content:center; border-radius:15px;"><i class="fas fa-qrcode" style="font-size: 100px; color:#1a7fff; opacity:0.8;"></i></div><p style="margin-top:15px; color:#666;">打开云绵APP扫码登录</p></div>';
break;
case 'phone_login.html':
title = '手机号登录';
content = '请输入您的手机号码登录云绵账号：<form style="text-align:left; margin-top: 15px;"><label>手机号码：<br><input type="tel" style="width:100%; padding:10px; border-radius:10px; border:1px solid #d0eaff; margin:8px 0 15px;"></label><button type="submit" style="background:#4a96ff; color:white; border:none; padding:12px 25px; border-radius:10px; font-size:16px; cursor:pointer;">获取验证码</button></form>';
break;
default:
title = '功能页面';
content = '这是当前功能的专属页面。';
}
showModal(title, content);
});
});
});
// 抖动动画效果
function shakeElement(element) {
element.classList.add('shake');
setTimeout(() => {
element.classList.remove('shake');
}, 500);
}
// 显示弹窗
function showModal(title, content) {
const modal = document.getElementById('featureModal');
const modalTitle = document.getElementById('modalTitle');
const modalContent = document.getElementById('modalContent');
modalTitle.textContent = title;
modalContent.innerHTML = content;
modal.style.display = 'block';
}
</script>
</body>
</html>© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
- 最新
- 最热
只看作者