图鉴数据 × 23 种 Card 效果实验
同一份数据，换一种卡片形态，阅读体验就完全不同。本文把设定页中的人物与动物图鉴提取为独立 JSON（src/data/novel-codex.json），再用这 30 个角色演示 23 种纯 CSS 为主的 Card 效果，可作为图鉴、成员列表类页面的选型参考。
数据来自 《天灾第十年跟我去种田》设定页 的人物与动物图鉴（`src/data/novel-codex.json`，15 位人物 + 15 个进化动物）。 下面用同一组数据演示 23 种卡片效果，每种效果取其中一部分角色（部分角色会在不同效果中复用）。
配图为依据书中外貌描写生成的 AI 插画，仅作辅助想象，非官方立绘。
翻转卡 Flip Card
悬停或点击翻面：正面立绘 + 身份，背面完整介绍。适合信息分层，图鉴感最强。
收藏卡 Holo Card
游戏收藏卡质感：渐变描边 + 悬停光泽扫过 + 轻微抬升。适合突出稀有度与阵营。
三号领地伙伴 羊老大
夏青最早深度绑定的进化动物伙伴
北部狼群 头狼
女王 · 神狼北部狼群权威核心
北部狼群 断腰狼
交换与联络枢纽
北部狼群 帅巨狼
主力战斗与运输成员
北部狼群／三号领地 狼犬老二
老二长期贴近三号领地的狼犬伙伴
北部狼群 病狼
医疗协作线成员
玻璃遮罩卡 Glass Overlay
整图铺底，毛玻璃信息面板常驻底部、悬停展开介绍。适合以插画为主角的展示。
老四
南部狼群南线狼族协作枢纽
活动于二十二号山一带，从救同伴、复仇和学习知识逐步走向深度结盟；后来能借助触屏笔与手机参与远程沟通，并进入跨物种协议体系。
呆瓜猴
走兽伙伴技术与劳动协作成员
白脸僧面猴，原生于热带雨林、长毛用于防蜂防毒而非御寒。以劳动和技术性协作为主，会随老二巡视领地；与松鼠等成员共同体现「员工式分工」而非宠物式驯养。
红松鼠
走兽伙伴采样与精细作业成员
体型小、行动灵活，主要被归入采样、技术活和助战一类的协作角色，是领地跨物种精细分工的一部分。
小飞毛
走兽伙伴选种员 · 三号领地第一位正式员工
一只鼠龄仅数月的进化红松鼠，天生能甄别优质种子，从上万粒绿灯种子里只挑出百余粒精品。被夏青以计件积分制正式聘用，包吃包住——住处就是夏青防护服的衣兜。
瞎眼虎
西部虎群脑域进化猛虎 · 夏青的熟虎
一只眼睛受伤的高大斑斓猛虎，另一只浅黄色圆眼警惕而有压迫感。它能理解部分人类语言，与夏青通过肉干、鸡蛋、草药和医疗建立有限信任；夏青还曾为它治疗寄生虫并佩戴颐石项链。
西部前虎王
西部虎群患病的前任虎王 · 牙齿再生患者
巨型脑域进化虎，患病后瘦削、皮毛干枯，橙黑条纹褪成土黄与灰黑，身体遍布旧伤，但浑浊金色眼睛仍沉静威严。老四将它带来接受张十的身体调理与牙齿再生评估。
聚光灯卡 Spotlight
光标附近浮现径向光晕（纯桌面端效果），暗色主题下更明显。适合科技感列表。
齐富
领地联盟种田实践骨干
具有丰富种田经验，侧重田间实践、作物生产和经验共享，为领地联盟提供稳定而务实的农业协作能力。
时舯
领地联盟农具制造与改进
动手能力强，能够制造、维修和改进农具，补足末世环境中难以依赖工业供应链的生产资料与技术保障。
赵泽
四号领主 领地联盟三号领地近邻
四号领地领主，与三号领地仅隔很近。巡视应答、入侵预警和进化鼠排查等事件中处于第一线，是夏青最直接的邻地联防伙伴之一。
辛瑜
八号领主 领地联盟女性领主 · C 类磁觉进化者
夏青的女性好友，能感知动物磁场波动与情绪变化。她掌握稀缺陨铁资源，也是经验丰富的养鸟人与空中侦察协作者；茉莉、进化玉带海雕等鸟类同伴常为联盟执行侦察与投撒任务。
张十
施佳然 科研与医疗女性恢复力／C 类磁觉双系进化者
张十一的母亲，曾独自在进化林中生存并保护女儿。她穿白大褂、戴眼镜，性格温和而坚韧；后进入张三科研体系，参与恢复因子研究及进化动物牙齿再生治疗。
张十一
叶诗怡 · 依依 · 叶十一 张十母女幼年 C 类磁觉进化者
张十约五岁的女儿，有柔软短发和一双会表达情绪的眼睛。她把自己视作母亲的同伴与保护者；为安全融入人类社会，曾以叶杨侄女叶诗怡的身份进入十五号领地生活和学习。
档案条 Roster
紧凑横条：小头像 + 单行身份 + 标签。适合成员多、需要快速扫读的场景。
-
谭七 十五号领主 · 女性速度进化者女性速度进化人物 -
张何 女性研究员 · 张三团队核心成员女性研究员人物 -
张宋 七号领地研究所负责人 · 动物研究员研究所负责人动物医疗人物 -
茉莉 脑域进化渡鸦 · 侦察与任务指挥渡鸦脑域进化动物 -
进化玉带海雕 速度进化猛禽 · 空中运载平台玉带海雕速度进化动物 -
灰皮鹦鹉 八号领地玻璃鸟房成员鹦鹉八号领地动物
3D 倾斜卡 Tilt
卡片跟随光标做 3D 透视倾斜并伴随高光（桌面端效果），立体感最强，适合重点角色展示。
谭七
领地联盟十五号领主 · 女性速度进化者
张何
科研与医疗女性研究员 · 张三团队核心成员
张宋
科研与医疗七号领地研究所负责人 · 动物研究员
茉莉
辛瑜的鸟类伙伴脑域进化渡鸦 · 侦察与任务指挥
进化玉带海雕
辛瑜的鸟类伙伴速度进化猛禽 · 空中运载平台
灰皮鹦鹉
辛瑜的鸟类伙伴八号领地玻璃鸟房成员
流光描边卡 Border Beam
一束光沿卡片边框持续旋转（纯 CSS @property 动画）。适合强调「进行中 / 高亮」状态。
辛瑜
八号领主女性领主 · C 类磁觉进化者
张十
施佳然女性恢复力／C 类磁觉双系进化者
张十一
叶诗怡 · 依依 · 叶十一幼年 C 类磁觉进化者
小飞毛
选种员 · 三号领地第一位正式员工
瞎眼虎
老五脑域进化猛虎 · 夏青的熟虎
西部前虎王
片虎患病的前任虎王 · 牙齿再生患者
双色调卡 Duotone
默认黑白灰度，悬停或触摸时恢复彩色并轻微放大。适合回忆、档案或「阵亡名单」类叙事。
夏青
主角 · 多系进化者 · 领地管理者
张三
第九种植中心负责人
杨晋
青龙战队负责人 · 晖三前列战力
谭君杰
领地排查与秩序线人物
唐怀
听觉进化者 · 后勤协作成员
匡庆威
交易与情报中间人
票券卡 Ticket
登机牌式布局：左侧存根 + 打孔缺口 + 虚线撕裂线（CSS mask 实现）。适合凭证、邀请函场景。
领地联盟 齐富
Codex Pass种田实践骨干
具有丰富种田经验，侧重田间实践、作物生产和经验共享，为领地联盟提供稳定而务实的农业协作能力。
领地联盟 时舯
Codex Pass农具制造与改进
动手能力强，能够制造、维修和改进农具，补足末世环境中难以依赖工业供应链的生产资料与技术保障。
领地联盟 赵泽 · 四号领主
Codex Pass三号领地近邻
四号领地领主，与三号领地仅隔很近。巡视应答、入侵预警和进化鼠排查等事件中处于第一线，是夏青最直接的邻地联防伙伴之一。
领地联盟 辛瑜 · 八号领主
Codex Pass女性领主 · C 类磁觉进化者
夏青的女性好友，能感知动物磁场波动与情绪变化。她掌握稀缺陨铁资源，也是经验丰富的养鸟人与空中侦察协作者；茉莉、进化玉带海雕等鸟类同伴常为联盟执行侦察与投撒任务。
堆叠卡 Card Stack
卡组叠放，点击顶层卡片切到下一张。适合逐个介绍角色的沉浸式浏览。
老四
南部狼群南线狼族协作枢纽
呆瓜猴
走兽伙伴技术与劳动协作成员
红松鼠
走兽伙伴采样与精细作业成员
小飞毛
走兽伙伴选种员 · 三号领地第一位正式员工
瞎眼虎
西部虎群脑域进化猛虎 · 夏青的熟虎
点击卡片查看下一位（共 5 张）
手风琴卡 Accordion
横向并排压缩，悬停或点击展开为主图，其余自动收窄。适合少量重点角色的全景对比。
头狼
北部狼群北部狼群权威核心
断腰狼
北部狼群交换与联络枢纽
帅巨狼
北部狼群主力战斗与运输成员
狼犬老二
北部狼群／三号领地长期贴近三号领地的狼犬伙伴
拍立得卡 Polaroid
白框相纸 + 胶带 + 随机偏转角度，悬停摆正放大。适合生活化、回忆向的相册风展示。
辛瑜
女性领主 · C 类磁觉进化者
张十
女性恢复力／C 类磁觉双系进化者
张十一
幼年 C 类磁觉进化者
谭七
十五号领主 · 女性速度进化者
张何
女性研究员 · 张三团队核心成员
张宋
七号领地研究所负责人 · 动物研究员
故障风卡 Glitch
悬停触发 RGB 通道分离与扫描线抖动，呼应末世科幻氛围。适合异常、危险或电子档案场景。
小飞毛
rec●选种员 · 三号领地第一位正式员工
瞎眼虎
rec●脑域进化猛虎 · 夏青的熟虎
西部前虎王
rec●患病的前任虎王 · 牙齿再生患者
茉莉
rec●脑域进化渡鸦 · 侦察与任务指挥
进化玉带海雕
rec●速度进化猛禽 · 空中运载平台
灰皮鹦鹉
rec●八号领地玻璃鸟房成员
邮票卡 Stamp
CSS mask 打出锯齿孔边做成纪念邮票。适合成就徽章、纪念收藏类展示。
谭君杰
Codex · 10
领地排查与秩序线人物
唐怀
Codex · 10
听觉进化者 · 后勤协作成员
匡庆威
Codex · 10
交易与情报中间人
齐富
Codex · 10
种田实践骨干
时舯
Codex · 10
农具制造与改进
赵泽
Codex · 10
三号领地近邻
杂志编辑卡 Editorial
无图大序号纯排版，靠字号、留白和细线分层。适合风格稳重的正文式介绍列表。
夏青 三号领主
领地核心 · 主角 · 多系进化者 · 领地管理者
离开晖三安全区后认领三号领地，以科学种田、资源交换和边界防卫建立生存根基。已确认力量、视觉、听觉与磁觉四系能力，也是领地联盟和跨物种协作的关键枢纽。
张三 七号领主
科研与领地 · 第九种植中心负责人
统筹第九种植中心，指定夏青负责管理、张陶负责种植技术推广。他把夏青与进化动物的稳定合作视为可验证的共生案例，兼具科研组织者与领地领主身份。
杨晋
战队协作 · 青龙战队负责人 · 晖三前列战力
青龙战队核心人物，拥有较高自主权。与夏青保持强协作关系，能共同执行进化林和领地任务，也可能因草药等稀缺资源产生利益交锋。
谭君杰
基地协作 · 领地排查与秩序线人物
与领地管理、风险排查和内应调查密切相关。进化鼠等领地安全事件中，官方排查体系是连接安全区与区外领主的重要力量。
唐怀
领地联盟 · 听觉进化者 · 后勤协作成员
曾与二号领地线相关，愿意以后勤身份随行；其体内三种特殊酶又使他成为跨基地科研攻关的重要样本，兼具行动协作与科研价值。
匡庆威
领地联盟 · 交易与情报中间人
人脉广、消息灵通，承担货品流转、信息交换和资源撮合，是领地经济网络中连接不同需求方的重要节点。
电影横幅卡 Ken Burns
整图作背景 + 持续缓慢推拉镜头 + 左侧暗部渐变压字，电影片头质感。适合页头 Hero 或专题入口。
夏青 三号领主
主角 · 多系进化者 · 领地管理者
离开晖三安全区后认领三号领地，以科学种田、资源交换和边界防卫建立生存根基。已确认力量、视觉、听觉与磁觉四系能力，也是领地联盟和跨物种协作的关键枢纽。
头狼 女王 · 神狼
北部狼群权威核心
土豪金色双眼、被称作蓝星金字塔尖的进化狼。维系北部狼群秩序并参与对外威慑；曾与西部狼群隔空对吼驱敌，被北部一区居民奉为「神狼」。与夏青的合作建立在交换、边界和相互尊重之上。
上滑揭示卡 Slide Reveal
整图铺满，常态只露标题条，悬停或聚焦时信息面板整体上滑盖住图片。适合图为主、按需读文的浏览。
断腰狼
北部狼群交换与联络枢纽
因腰部旧伤得名，地位仅次于头狼，是夏青最常打交道的进化狼。常年穿着定制犬用防护服、兜里揣颐石来交易，还学会开门禁、套触屏笔操作手机看视频，是狼群里的「社交与学习担当」。
帅巨狼
北部狼群主力战斗与运输成员
体型与战力突出，在狼群分工中承担主力行动和运力角色，是北部狼群与三号领地联合任务中的重要执行成员。
狼犬老二
北部狼群／三号领地长期贴近三号领地的狼犬伙伴
常驻三号领地一侧，能参与拖枝、巡防等日常劳动。它的稳定居住与协作，是进化动物主动信任人类生活空间的代表案例。
病狼
北部狼群医疗协作线成员
作为北部狼群具名成员，与伤病治疗、采样保护和人狼医疗互助相关，体现狼群将人类医疗能力纳入长期合作的过程。
色调滤镜卡 Color Blend
在背景图上叠加彩色渐变（mix-blend-mode），悬停还原本色。适合给同组内容统一氛围色。
辛瑜
女性领主 · C 类磁觉进化者
张十
女性恢复力／C 类磁觉双系进化者
张十一
幼年 C 类磁觉进化者
谭七
十五号领主 · 女性速度进化者
张何
女性研究员 · 张三团队核心成员
张宋
七号领地研究所负责人 · 动物研究员
文字镂空卡 Text Clip
背景图填充进大号文字（background-clip: text），名字本身就是画面。适合海报感的角色首屏。
夏青
主角 · 多系进化者 · 领地管理者
离开晖三安全区后认领三号领地，以科学种田、资源交换和边界防卫建立生存根基。已确认力量、视觉、听觉与磁觉四系能力，也是领地联盟和跨物种协作的关键枢纽。
辛瑜
女性领主 · C 类磁觉进化者
夏青的女性好友，能感知动物磁场波动与情绪变化。她掌握稀缺陨铁资源，也是经验丰富的养鸟人与空中侦察协作者；茉莉、进化玉带海雕等鸟类同伴常为联盟执行侦察与投撒任务。
头狼
北部狼群权威核心
土豪金色双眼、被称作蓝星金字塔尖的进化狼。维系北部狼群秩序并参与对外威慑；曾与西部狼群隔空对吼驱敌，被北部一区居民奉为「神狼」。与夏青的合作建立在交换、边界和相互尊重之上。
茉莉
脑域进化渡鸦 · 侦察与任务指挥
通体漆黑、能清晰说人话的进化渡鸦，常站在辛瑜肩头。它能执行复杂指令、操作任务流程，并指挥自己的玉带海雕伙伴完成空中侦察与精准投撒。
轮播横幅卡 Cinema Slideshow
多张 Ken Burns 横幅交叉淡入自动轮播，每张推拉方向不同；可点圆点切换，悬停暂停。适合首页 Hero 轮换位。
头狼 女王 · 神狼
北部狼群权威核心 · 土豪金色双眼、被称作蓝星金字塔尖的进化狼。维系北部狼群秩序并参与对外威慑；曾与西部狼群隔空对吼驱敌，被北部一区居民奉为「神狼」。与夏青的合作建立在交换、边界和相互尊重之上。
瞎眼虎 老五
脑域进化猛虎 · 夏青的熟虎 · 一只眼睛受伤的高大斑斓猛虎，另一只浅黄色圆眼警惕而有压迫感。它能理解部分人类语言，与夏青通过肉干、鸡蛋、草药和医疗建立有限信任；夏青还曾为它治疗寄生虫并佩戴颐石项链。
茉莉
脑域进化渡鸦 · 侦察与任务指挥 · 通体漆黑、能清晰说人话的进化渡鸦，常站在辛瑜肩头。它能执行复杂指令、操作任务流程，并指挥自己的玉带海雕伙伴完成空中侦察与精准投撒。
羊老大
夏青最早深度绑定的进化动物伙伴 · 从领地开荒阶段起参与翻地、清理林地和日常防卫。它与夏青的关系经历戕雨失控等考验，逐步由危险邻居转为有明确分工和信任基础的共同生活者。
视差横幅卡 Scroll Parallax
滚动页面时背景图以不同速度平移（CSS 滚动驱动动画，新浏览器生效、旧浏览器静态降级）。适合长文中的分隔横幅。
张十 施佳然
女性恢复力／C 类磁觉双系进化者
张十一的母亲，曾独自在进化林中生存并保护女儿。她穿白大褂、戴眼镜，性格温和而坚韧；后进入张三科研体系，参与恢复因子研究及进化动物牙齿再生治疗。
谭七 原名谭琪
十五号领主 · 女性速度进化者
谭君杰的女儿，性格活泼、行动利落。她正式自报为「晖三领地联盟十五号领主谭七」，积极参与联盟协作与抗灾，也与叶十一一同学习成长。
推近揭示卡 Zoom Reveal
悬停时镜头缓慢推近、暗角加深、介绍文字上浮，流媒体海报墙的经典交互。适合角色墙 / 作品墙。
谭君杰
基地协作领地排查与秩序线人物
与领地管理、风险排查和内应调查密切相关。进化鼠等领地安全事件中，官方排查体系是连接安全区与区外领主的重要力量。
唐怀
领地联盟听觉进化者 · 后勤协作成员
曾与二号领地线相关，愿意以后勤身份随行；其体内三种特殊酶又使他成为跨基地科研攻关的重要样本，兼具行动协作与科研价值。
匡庆威
领地联盟交易与情报中间人
人脉广、消息灵通，承担货品流转、信息交换和资源撮合，是领地经济网络中连接不同需求方的重要节点。
齐富
领地联盟种田实践骨干
具有丰富种田经验，侧重田间实践、作物生产和经验共享，为领地联盟提供稳定而务实的农业协作能力。
宽银幕字幕卡 Letterbox
21:9 遮幅画框 + 底部居中电影字幕，悬停时黑边收窄、字幕换成台词式介绍。适合金句、场面感展示。
西部虎群 西部前虎王（片虎） · 患病的前任虎王 · 牙齿再生患者
「巨型脑域进化虎，患病后瘦削、皮毛干枯，橙黑条纹褪成土黄与灰黑，身体遍布旧伤，但浑浊金色眼睛仍沉静威严。」
南部狼群 老四（南部狼王线） · 南线狼族协作枢纽
「活动于二十二号山一带，从救同伴、复仇和学习知识逐步走向深度结盟；后来能借助触屏笔与手机参与远程沟通，并进入跨物种协议体系。」