好看的登录界面
19750
画布
|大纲
内容详情
视觉氛围
背景
- 雪山
- 远景
- 日照金顶
- 使用CSS渐变+SVG轮廓
- 减少GPU压力
- 使用CSS渐变+SVG轮廓
- 日照金顶
- 中景
- 雪线纹理
- WebGL噪声贴图
- 动态生成，节省带宽
- WebGL噪声贴图
- 雪线纹理
- 近景
- 雪堆阴影
- 多层box-shadow
- 营造立体感
- 多层box-shadow
- 雪堆阴影
- 远景
- 下雪
- 粒子系统
- 三层深度
- 近大远小
- Z-index分层
- 近大远小
- 随机轨迹
- 贝塞尔曲线
- 使用requestAnimationFrame
- 贝塞尔曲线
- 三层深度
- 性能优化
- GPU加速
- will-change: transform
- 避免重排
- will-change: transform
- 节流渲染
- 帧率自适应
- 低于60fps自动降质
- 帧率自适应
- GPU加速
- 粒子系统
鼠标互动
- 雪花避让
- 射线检测
- 以鼠标为圆心
- 半径80px
- 计算欧氏距离
- 半径80px
- 以鼠标为圆心
- 力场算法
- 反向速度向量
- 加速度衰减
- 模拟空气阻力
- 加速度衰减
- 反向速度向量
- 射线检测
- 轨迹特效
- 鼠标拖尾
- 半透明雪花
- 0.3s淡出
- 使用CSS动画
- 0.3s淡出
- 半透明雪花
- 雪暴增强
- 快速移动时
- 粒子数量*1.5
- 节流阀控制
- 粒子数量*1.5
- 快速移动时
- 鼠标拖尾
登录面板
容器
- 白色毛玻璃
- background: rgba(255,255,255,0.85)
- backdrop-filter: blur(12px)
- 兼容写法
- -webkit-backdrop-filter
- 兼容写法
- backdrop-filter: blur(12px)
- 边框
- 1px rgba(255,255,255,0.4)
- 内阴影
- inset 0 0 0 1px
- 内阴影
- 1px rgba(255,255,255,0.4)
- background: rgba(255,255,255,0.85)
猫头鹰
- 初始状态
- 趴着睡觉
- 眼睛闭合SVG
- 使用
- 填充#4B4B4B
- 使用
- 眼睛闭合SVG
- 趴着睡觉
- 交互反馈
- 聚焦用户名
- 睁开一只眼
- 200ms过渡
- transform: scaleY(1)
- 200ms过渡
- 睁开一只眼
- 输入密码
- 抬起翅膀遮眼
- 旋转30°
- 暗示安全
- 旋转30°
- 抬起翅膀遮眼
- 聚焦用户名
- 动画实现
- SVG SMIL
- 标签
- 兼容主流浏览器
- 标签
- Lottie备用
- JSON动画
- 首帧静态
- 减少白屏
- 首帧静态
- JSON动画
- SVG SMIL
表单元素
用户名
- 占位符
- 请输入用户名
- 浅灰#9E9E9E
- 聚焦变深蓝
- 浅灰#9E9E9E
- 请输入用户名
- 实时校验
- 正则规则
- 3-16位字符
- 字母数字下划线
- /^[a-zA-Z0-9_]{3,16}$/
- 字母数字下划线
- 3-16位字符
- 防抖300ms
- 减少请求
- 使用lodash.debounce
- 减少请求
- 正则规则
密码
- 占位符
- 请输入密码
- 可切换明文
- 眼睛图标
- 点击toggle
- 眼睛图标
- 可切换明文
- 请输入密码
- 强度提示
- 弱/中/强
- 颜色条
- 红#F44336 → 绿#4CAF50
- 根据长度+特殊字符
- 红#F44336 → 绿#4CAF50
- 颜色条
- 弱/中/强
验证码
- 生成规则
- 4位混合
- 数字+大写字母
- 排除0O1I
- 共32字符池
- 排除0O1I
- 数字+大写字母
- 4位混合
- 画布绘制
- 干扰线
- 随机3条
- 透明度0.3
- 防OCR
- 透明度0.3
- 随机3条
- 噪点
- 20个灰点
- 半径1px
- 20个灰点
- 干扰线
- 时效控制
- 60秒倒计时
- setInterval
- 逐秒更新
- 显示于按钮
- 逐秒更新
- setInterval
- 过期处理
- 自动刷新
- 弹出toast提示
- "验证码已失效"
- 弹出toast提示
- 自动刷新
- 60秒倒计时
交互流程
提交前
- 前端校验
- 字段完整性
- 红色边框提示
- 聚焦自动清除
- 红色边框提示
- 验证码本地比对
- 忽略大小写
- 减少用户困扰
- 忽略大小写
- 字段完整性
提交
- 加载动画
- 猫头鹰转圈
- CSS旋转
- 1s linear infinite
- CSS旋转
- 猫头鹰转圈
- 网络请求
- Fetch API
- POST JSON
- 携带指纹
- 防CSRF
- 携带指纹
- POST JSON
- Fetch API
结果返回
- 成功
- 跳转弹窗
- 雪山渐隐
- 0.5s淡出
- 雪山渐隐
- 令牌存储
- HttpOnly Cookie
- 兼容XSS防护
- HttpOnly Cookie
- 跳转弹窗
- 失败
- 错误提示
- 猫头鹰摇头
- 左右摆动2次
- 猫头鹰摇头
- 验证码刷新
- 自动重新生成
- 无需手动点击
- 自动重新生成
- 错误提示
性能与安全
性能
- 资源压缩
- 雪背景WebP
- 减少30%体积
- 支持检测
- 标签
- 支持检测
- 减少30%体积
- 雪背景WebP
- 懒加载
- 猫头鹰Lottie
- 交互时加载
- 减少首屏JS
- 交互时加载
- 猫头鹰Lottie
安全
- 验证码
- 一次性
- 后端立即失效
- 防止重放
- 后端立即失效
- 一次性
- 密码
- 前端哈希
- SHA-256+盐
- 降低明文风险
- SHA-256+盐
- 前端哈希
- HTTPS
- 全站TLS1.3
- HSTS开启
- 强制加密
- HSTS开启
- 全站TLS1.3
可访问性
键盘导航
- Tab顺序
- 用户名→密码→验证码→提交
- 可见焦点环
- outline: 2px solid #1976D2
- 可见焦点环
- 用户名→密码→验证码→提交
屏幕阅读器
- aria-label
- 猫头鹰描述
- "可爱的雪山猫头鹰吉祥物"
- 增强无障碍
- "可爱的雪山猫头鹰吉祥物"
- 猫头鹰描述