使用html和django实现2套一模一样的超炫登录界面，效果如下：
一个带有互动动画角色的登录页面。角色会跟随鼠标移动、对用户输入做出反应，提供生动有趣的登录体验。
预览
页面布局
- 左侧面板：4 个动画角色（紫色矩形、黑色矩形、橙色半圆、黄色圆角矩形）
- 右侧面板：登录表单（邮箱、密码、登录按钮、Google 登录）
交互动画效果
| 场景 | 效果 |
|---|---|
| 空闲 | 角色眼睛跟随鼠标移动，身体微微倾斜 |
| 随机眨眼 | 紫色和黑色角色随机间隔眨眼 |
| 输入邮箱 | 角色互相对视 |
| 输入密码 | 角色转头回避，不看密码 |
| 显示密码 | 角色看向远处，紫色角色偶尔偷看 |
| 登录失败 | 角色露出沮丧表情并摇头 |
| 按钮悬停 | 文字滑出，紫色背景 + 箭头滑入 |
技术实现
单 HTML 文件，零依赖：
- 布局：CSS Grid 两栏布局，响应式适配
- 角色：纯 CSS 图形（圆角矩形、半圆）
- 动画：CSS transitions + keyframes + 原生 JavaScript 状态管理
- 交互：鼠标跟随（mousemove）、焦点检测（focus/blur）、表单校验
使用
直接在浏览器中打开 index.html 即可。
bash
open index.html文件结构
login/
index.html # 完整页面（HTML + CSS + JS）
PRD.md # 产品需求文档
README.md # 项目说明整个项目文件代码只有index.html，源码地址：
https://download.csdn.net/download/FL1623863129/92716106
同时我也用python语言Django实现了一个一样功能登录界面，源码地址：
https://download.csdn.net/download/FL1623863129/92716108