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

前端知识回顾-登录界面

ai 2025/7/20 12:19:35 
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>现代登录界面</title><!-- 引入Tailwind CSS --><script src="https://cdn.tailwindcss.com"></script><!-- 引入Font Awesome图标库 --><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><!-- 配置Tailwind自定义颜色和字体 --><script>tailwind.config = {theme: {extend: {colors: {primary: '#165DFF',secondary: '#36BFFA',neutral: {100: '#F5F7FA',200: '#E5E6EB',300: '#C9CDD4',400: '#86909C',500: '#4E5969',600: '#272E3B',700: '#1D2129',},},fontFamily: {inter: ['Inter', 'system-ui', 'sans-serif'],},},}}</script><!-- 自定义工具类 --><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.text-shadow {text-shadow: 0 2px 4px rgba(0,0,0,0.1);}.transition-custom {transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}.bg-gradient-blue {background: linear-gradient(135deg, #165DFF 0%, #36BFFA 100%);}}</style><!-- 全局样式 --><style>body {font-family: 'Inter', system-ui, sans-serif;overflow-x: hidden;}/* 输入框聚焦动画 */.input-focus:focus {@apply border-primary ring-2 ring-primary/20;}/* 按钮悬停动画 */.btn-hover {@apply hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300;}/* 卡片动画 */.card-hover {@apply hover:shadow-xl transition-all duration-500;}/* 加载动画 */@keyframes spin {to { transform: rotate(360deg); }}.spin-animation {animation: spin 1s linear infinite;}/* 背景粒子动画 */.particle {position: absolute;border-radius: 50%;background: rgba(255, 255, 255, 0.1);pointer-events: none;z-index: 0;}</style>
</head>
<body class="bg-neutral-100 min-h-screen flex items-center justify-center p-4"><!-- 背景装饰元素 --><div class="fixed inset-0 overflow-hidden -z-10"><div id="particles" class="absolute inset-0"></div><div class="absolute top-0 left-0 w-full h-64 bg-gradient-to-b from-primary/10 to-transparent"></div><div class="absolute bottom-0 right-0 w-64 h-64 bg-gradient-to-t from-secondary/10 to-transparent rounded-full -mr-32 -mb-32"></div></div><!-- 主容器 --><div class="relative w-full max-w-5xl bg-white rounded-2xl shadow-xl overflow-hidden"><!-- 登录表单区域 --><div class="grid md:grid-cols-2"><!-- 左侧图片区域 --><div class="hidden md:flex flex-col justify-center items-center p-8 bg-gradient-blue text-white relative overflow-hidden"><div class="absolute inset-0 opacity-20"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full"><path fill="#FFFFFF" d="M40.8,-70.7C52.2,-64.6,61.9,-52.2,67.6,-38.1C73.4,-24,75.1,-8.3,72.5,6.9C69.9,22,63,36.8,52.9,46.8C42.8,56.8,29.5,62,15.6,66.2C1.8,70.4,-12.5,73.6,-25.7,71.9C-38.9,70.2,-51,63.7,-62.2,53.3C-73.3,42.9,-83.6,28.6,-87.9,13.3C-92.2,-2,-90.6,-17.8,-82.7,-31.3C-74.8,-44.8,-60.6,-56.1,-46.1,-62.2C-31.6,-68.3,-16.8,-69.2,-0.2,-69.6C16.4,-70,32.8,-70,40.8,-70.7Z" transform="translate(100 100)" /></svg></div><div class="relative z-10 text-center p-6"><h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-shadow">欢迎回来</h2><p class="text-lg opacity-90 mb-8">登录您的账户，继续您的精彩旅程</p><!-- 装饰元素 --><div class="w-32 h-32 rounded-full border-4 border-white/30 flex items-center justify-center mb-8"><div class="w-24 h-24 rounded-full border-4 border-white/30 flex items-center justify-center"><div class="w-16 h-16 rounded-full border-4 border-white/30"></div></div></div><p class="text-sm opacity-80">没有账户？<a href="#" class="font-medium hover:underline transition-colors">立即注册</a></p></div></div><!-- 右侧表单区域 --><div class="p-8 md:p-12 flex flex-col justify-center"><div class="mb-8"><h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700 mb-2">登录</h1><p class="text-neutral-500">请输入您的账号和密码</p></div><!-- 登录表单 --><form id="loginForm" class="space-y-5"><!-- 用户名/邮箱输入 --><div class="space-y-2"><label for="email" class="block text-sm font-medium text-neutral-600">邮箱</label><div class="relative"><span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400"><i class="fa fa-envelope-o"></i></span><input type="email" id="email" name="email" class="w-full pl-10 pr-4 py-3 rounded-lg border border-neutral-300 input-focus outline-none transition-custom"placeholder="example@mail.com" required></div></div><!-- 密码输入 --><div class="space-y-2"><div class="flex justify-between items-center"><label for="password" class="block text-sm font-medium text-neutral-600">密码</label><a href="#" class="text-sm text-primary hover:text-primary/80 transition-colors">忘记密码？</a></div><div class="relative"><span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400"><i class="fa fa-lock"></i></span><input type="password" id="password" name="password" class="w-full pl-10 pr-10 py-3 rounded-lg border border-neutral-300 input-focus outline-none transition-custom"placeholder="••••••••" required><button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600 transition-colors"><i class="fa fa-eye-slash"></i></button></div></div><!-- 记住我选项 --><div class="flex items-center"><input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-neutral-300 rounded"><label for="remember" class="ml-2 block text-sm text-neutral-600">记住我</label></div><!-- 登录按钮 --><button type="submit" id="loginButton" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg btn-hover flex items-center justify-center"><span>登录</span><span id="loginSpinner" class="ml-2 hidden"><i class="fa fa-circle-o-notch spin-animation"></i></span></button><!-- 分隔线 --><div class="relative flex items-center my-6"><div class="flex-grow border-t border-neutral-200"></div><span class="flex-shrink mx-4 text-neutral-400 text-sm">或者</span><div class="flex-grow border-t border-neutral-200"></div></div><!-- 社交登录 --><div class="grid grid-cols-3 gap-3"><button type="button" class="flex items-center justify-center py-2 px-4 border border-neutral-300 rounded-lg hover:bg-neutral-50 transition-colors"><i class="fa fa-google text-neutral-700"></i></button><button type="button" class="flex items-center justify-center py-2 px-4 border border-neutral-300 rounded-lg hover:bg-neutral-50 transition-colors"><i class="fa fa-github text-neutral-700"></i></button><button type="button" class="flex items-center justify-center py-2 px-4 border border-neutral-300 rounded-lg hover:bg-neutral-50 transition-colors"><i class="fa fa-weixin text-neutral-700"></i></button></div></form><!-- 底部注册提示 --><div class="mt-8 text-center"><p class="text-neutral-600">还没有账户？ <a href="#" class="text-primary font-medium hover:underline transition-colors">立即注册</a></p></div></div></div></div><!-- 成功提示弹窗 --><div id="successToast" class="fixed bottom-5 right-5 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 flex items-center"><i class="fa fa-check-circle mr-2"></i><span>登录成功！正在跳转...</span></div><!-- 错误提示弹窗 --><div id="errorToast" class="fixed bottom-5 right-5 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 flex items-center"><i class="fa fa-exclamation-circle mr-2"></i><span>邮箱或密码错误！</span></div><!-- JavaScript --><script>// DOM元素const loginForm = document.getElementById('loginForm');const loginButton = document.getElementById('loginButton');const loginSpinner = document.getElementById('loginSpinner');const togglePassword = document.getElementById('togglePassword');const passwordInput = document.getElementById('password');const successToast = document.getElementById('successToast');const errorToast = document.getElementById('errorToast');// 生成背景粒子效果function createParticles() {const particlesContainer = document.getElementById('particles');const particleCount = 30;for (let i = 0; i < particleCount; i++) {const particle = document.createElement('div');particle.classList.add('particle');// 随机大小、位置和动画const size = Math.random() * 80 + 20;const posX = Math.random() * 100;const posY = Math.random() * 100;const duration = Math.random() * 60 + 30;const delay = Math.random() * 10;particle.style.width = `${size}px`;particle.style.height = `${size}px`;particle.style.left = `${posX}%`;particle.style.top = `${posY}%`;particle.style.opacity = Math.random() * 0.2 + 0.1;// 添加动画particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;particlesContainer.appendChild(particle);}}// 添加浮动动画样式function addFloatAnimation() {const style = document.createElement('style');style.textContent = `@keyframes float {0% { transform: translateY(0) translateX(0); }25% { transform: translateY(-20px) translateX(10px); }50% { transform: translateY(-40px) translateX(-10px); }75% { transform: translateY(-20px) translateX(5px); }100% { transform: translateY(0) translateX(0); }}`;document.head.appendChild(style);}// 切换密码可见性togglePassword.addEventListener('click', () => {const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';passwordInput.setAttribute('type', type);// 切换图标const icon = togglePassword.querySelector('i');if (type === 'text') {icon.classList.remove('fa-eye-slash');icon.classList.add('fa-eye');} else {icon.classList.remove('fa-eye');icon.classList.add('fa-eye-slash');}// 添加图标动画icon.classList.add('scale-110');setTimeout(() => icon.classList.remove('scale-110'), 200);});// 表单提交处理loginForm.addEventListener('submit', (e) => {e.preventDefault();// 显示加载动画loginButton.disabled = true;loginSpinner.classList.remove('hidden');// 模拟登录API请求setTimeout(() => {// 隐藏加载动画loginSpinner.classList.add('hidden');// 验证表单const email = document.getElementById('email').value;const password = document.getElementById('password').value;// 模拟验证逻辑if (email && password) {// 登录成功showSuccessToast();// 模拟跳转setTimeout(() => {window.location.href = '#';}, 1500);} else {// 登录失败loginButton.disabled = false;showErrorToast();}}, 1500);});// 显示成功提示function showSuccessToast() {successToast.classList.remove('translate-y-20', 'opacity-0');successToast.classList.add('translate-y-0', 'opacity-100');// 3秒后隐藏提示setTimeout(() => {successToast.classList.remove('translate-y-0', 'opacity-100');successToast.classList.add('translate-y-20', 'opacity-0');}, 3000);}// 显示错误提示function showErrorToast() {errorToast.classList.remove('translate-y-20', 'opacity-0');errorToast.classList.add('translate-y-0', 'opacity-100');// 晃动效果errorToast.classList.add('animate-shake');// 3秒后隐藏提示setTimeout(() => {errorToast.classList.remove('translate-y-0', 'opacity-100');errorToast.classList.add('translate-y-20', 'opacity-0');errorToast.classList.remove('animate-shake');}, 3000);}// 添加晃动动画const shakeStyle = document.createElement('style');shakeStyle.textContent = `@keyframes shake {0%, 100% { transform: translateX(0); }10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }20%, 40%, 60%, 80% { transform: translateX(5px); }}.animate-shake {animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;}`;document.head.appendChild(shakeStyle);// 页面加载完成后初始化window.addEventListener('DOMContentLoaded', () => {addFloatAnimation();createParticles();// 为输入框添加焦点和失焦动画const inputs = document.querySelectorAll('input');inputs.forEach(input => {input.addEventListener('focus', () => {input.parentElement.classList.add('scale-[1.01]');});input.addEventListener('blur', () => {input.parentElement.classList.remove('scale-[1.01]');});});});</script>
</body>
</html>

- <!DOCTYPE html> :声明文档类型为HTML5，告知浏览器使用HTML5标准解析页面
- <html lang="zh-CN"> : HTML根元素， lang="zh-CN" 属性指定页面主要语言为简体中文
- <head> : 包含文档元数据，不会直接显示在页面中
- <body> : 包含页面所有可见内容
- <meta charset="UTF-8"> : 指定文档字符编码为UTF-8
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 设置视口属性，确保移动设备上正确显示
- <title>现代登录界面</title> : 定义页面标题，显示在浏览器标签栏
- <script src="https://cdn.tailwindcss.com"></script> : 引入Tailwind CSS框架
- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> : 引入Font Awesome图标库
- <script> （配置Tailwind）: 自定义Tailwind主题，扩展颜色和字体配置
- <style type="text/tailwindcss"> : 定义Tailwind自定义工具类
- <style> : 包含全局CSS样式和动画定义
- <div class="fixed inset-0 overflow-hidden -z-10"> : 背景装饰容器，使用负z-index确保在内容下方
- <div id="particles" class="absolute inset-0"></div> : 粒子动画容器
- <div class="relative w-full max-w-5xl bg-white rounded-2xl shadow-xl overflow-hidden"> : 主内容卡片容器
- <div class="grid md:grid-cols-2"> : 使用网格布局创建双列结构（桌面视图）
- <form id="loginForm" class="space-y-5"> : 登录表单容器
- <label> : 表单控件标签，关联输入字段
- <input type="email" id="email" ...> : 邮箱输入框
- <input type="password" id="password" ...> : 密码输入框
- <button type="submit" ...> : 登录提交按钮
- <div class="grid grid-cols-3 gap-3"> : 社交登录按钮容器
- <div id="successToast" ...> : 登录成功提示弹窗
- <div id="errorToast" ...> : 登录错误提示弹窗
- <script> : 包含页面交互逻辑，如表单提交处理、密码可见性切换、动画效果等

http://www.xdnf.cn/news/15748.html

相关文章：

  • 实现el-select下拉框，下拉时加载数据
  • 【RK3576】【Android14】摄像头MIPI开发调试
  • [Python] -实用技巧10- 时间处理：datetime 和 time 模块入门
  • 【数据结构初阶】--双向链表(二)
  • 跨境卖家紧急自查，Endryko Karmadi四季版画版权维权
  • 【嵌入式电机控制#16】电流环（三）：过采样提高采集精度看门狗监测总线电压
  • 【Linux系统】进程控制
  • 从0开始学习R语言--Day51--PH检验
  • OpenCV 官翻 1 -介绍、安装、功能概览、核心操作
  • 云计算与 DevOps（开发与运维）
  • sqli-labs靶场通关笔记：第32-33关 宽字节注入
  • Java 中的继承与多态
  • 基于GEE与哨兵2号的土地覆盖分类方法及实现
  • Vue Swiper组件
  • n8n教程分享,从Github读取.md文档内容
  • MySQL(145)如何升级MySQL版本？
  • 【爬虫】04 - 高级数据存储
  • Fortran实战：快速解析气象NC数据
  • OpenCV 官翻8 - 其他算法
  • 牛客-倒置字符串
  • SQL Server和PostgreSQL填充因子
  • debian的pulseaudio删掉也没事
  • SIMATIC WinCC Unified 使用 KPI 优化流程
  • Nacos配置管理
  • 【Unity3D实例-功能-移动】角色移动-通过WSAD（Rigidbody方式）
  • Kafka、RabbitMQ 与 RocketMQ 高可靠消息保障方案对比分析
  • TinyMCE 富文本编辑器在 vue2 中的使用 @tinymce/tinymce-vue
  • MySQL——约束类型
  • Vue 3 中封装并使用 IndexedDB 的完整教程（含泛型、模块化、通用 CRUD）
  • 网络爬虫概念初解