PRTS-Login-Page

充满科幻机能风（《明日方舟》PRTS系统）的网页动画和登录页面设计

项目介绍

这是一个基于《明日方舟》游戏中的PRTS（Primitive Rhodes Island Terminal Service）系统设计的登录页面项目，包含了科幻机能风动画和登录表单设计。

项目结构

PRTS-Login-Page-main/
├── 登录表单/
│   ├── PRTS-Dynamic.html    # 动态登录表单（包含交互效果）
│   └── PRTS-Static.html     # 静态登录表单（基础结构）
├── 网页动画/
│   ├── PRTS.html            # 第一版完整动画
│   └── PRTS2.html           # 第二版优化动画
├── LICENSE
├── PRTS-目标视频动画.mp4
└── README.md

核心功能

网页动画版本

PRTS.html 包含以下核心动画效果：

1. 系统启动动画：菱形网格加载、顶部状态栏和底部版权信息渐显
2. 打字机效果：模拟用户名和密码的输入过程
3. 故障艺术效果：屏幕闪烁和线条干扰效果
4. 授权动画：登录成功后的授权过程动画
5. 进度条动画：系统加载进度展示
6. 欢迎文本动画：字符随机切换后显示最终文本

登录表单版本

PRTS-Static.html 和 PRTS-Dynamic.html 提供了两种登录表单实现：

• 静态表单：基础的HTML表单结构，包含用户名和密码输入框
• 动态表单：包含更多交互和动画效果，如输入框焦点动画、提交按钮效果等

技术栈

• HTML5：页面结构
• CSS3：样式设计和动画
• JavaScript：交互逻辑
• GSAP：专业动画库（通过CDN加载）

设计特点

• 机能美学：简洁的线条、几何图形和等宽字体
• 科幻风格：黑色、白色和灰色的经典配色方案
• 响应式设计：适配不同屏幕尺寸
• 流畅动画：使用GSAP实现高性能动画效果
• 细节丰富：包含多种微交互和视觉效果

使用方法

直接在浏览器中打开对应的HTML文件即可查看效果。项目不需要依赖安装，所有资源都通过CDN加载或内嵌在文件中。

致谢

• 《明日方舟》游戏提供了设计灵感
• GreenSock Animation Platform 提供了强大的动画支持