一个基于液态玻璃 (Liquid Glass) 设计风格的中国大陆居民身份证号码解析与生成工具。本项目将复杂的功能逻辑与现代、沉浸式的视觉体验相结合，全部代码封装在一个独立的HTML文件中，无需任何依赖或构建步骤，即开即用。
👆 项目效果预览
👉 点击这里在线体验
本项目的核心是其独特的视觉设计，旨在提供一种流动、通透、具有高级质感的交互体验：
- 液态玻璃效果: 所有UI组件均采用液态玻璃风格，通过SVG滤镜 (
feTurbulence,feDisplacementMap) 和 CSS (backdrop-filter) 结合，创造出动态、扭曲的视觉效果，仿佛透过一块流动的玻璃观察背景。 - 柔彩晕染背景: 采用纯CSS实现的多重径向渐变与线性渐变叠加，形成一个柔和、多彩、富有层次感的静态背景，为玻璃组件提供了绝佳的映衬。
- 细腻的微交互: 包括组件悬浮时的3D浮动效果、点击时的径向渐变涟漪动画，增强了用户的操作感知和愉悦感。
- 单文件哲学: 秉承极简主义原则，将所有HTML结构、CSS样式、SVG滤镜和JavaScript逻辑整合进一个文件中，实现了极致的便携性。
- 号码校验: 自动校验输入的15位或18位身份证号码的合法性，并实时显示“有效”或“无效”状态。
- 信息提取: 若号码有效，可立即解析出以下信息：
- 发证地区: 精确到省-市-区/县。
- 出生日期: 格式为
YYYY-MM-DD。 - 年龄: 根据出生日期自动计算。
- 星座: 根据出生日期自动计算。
- 生肖: 根据出生年份自动计算。
- 性别: 男或女。
- 校验位: 18位身份证的最后一位。
- 条件筛选: 用户可以根据以下条件自定义生成新的身份证号码：
- 地区: 可通过下拉菜单选择任意省-市-区/县。
- 性别: 可选男、女或任意。
- 出生日期范围: 可自定义起始和结束日期。
- 一键生成: 点击按钮即可生成一个符合所有条件且通过合法性校验的随机身份证号码。
- 即时分析: 生成的号码会自动填充到解析器中，方便用户立即查看其详细信息。
- HTML5: 负责页面的基本结构。
- SVG: 核心的
SVG Filter技术，用于实现液态玻璃的扭曲失真效果。 - CSS3:
- 使用
backdrop-filter实现背景的毛玻璃模糊效果。 - 通过多重背景渐变 (
radial-gradient,linear-gradient) 创造柔彩晕染背景。 transition和@keyframes实现所有动态交互效果。- 响应式布局确保在不同尺寸屏幕上的良好体验。
- 使用
- JavaScript (ES6+):
- 处理所有业务逻辑，包括身份证号码的校验算法、15位到18位的转换、信息提取与计算。
- 动态生成符合条件的随机号码。
- 完整的DOM操作，实现数据与视图的实时同步。
- 内嵌了详尽的中国行政区划代码数据源 (
AREA_DB)。
本项目是一个单文件应用，无需安装或构建步骤。
- 下载
index.html文件到您的本地计算机。 - 使用任何现代浏览器（如 Chrome, Firefox, Edge, Safari）打开该文件。
- 即可开始使用。
👉项目作者𝕏@Yamada_Ryoooo
所有代码都包含在 index.html 中，其内部结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
/* 所有的 CSS 样式都在这里 */
</style>
</head>
<body>
<svg style="display: none">
<filter id="glass-distortion">
</filter>
</svg>
<nav class="glass-navbar ...">...</nav>
<header class="glass-hero ...">...</header>
<main class="container">
</main>
<footer class="footer">...</footer>
<script>
// 所有的 JS 逻辑，包括 AREA_DB 数据都在这里
</script>
</body>
</html>