「38 闪卡 第五人格」
/~03763Yj4au~:/
链接：https://pan.quark.cn/s/42de8ee0e3cf
闪卡网页 第五人格 html 开源
第五人格 - 角色展示卡片
基于第五人格风格设计的角色展示页面，带有全息卡片效果。
功能特点
全息3D卡片效果 - 鼠标悬停时卡片会跟随鼠标倾斜，呈现炫酷的全息闪光效果
卡片切换 - 底部缩略图可切换不同角色
响应式设计 - 自适应桌面和移动端
第五人格风格UI - 暗黑恐怖主题，血红色与金色配色
文件结构
. ├── 333.html # 主页面文件 ├── 222.html # 原始全息效果参考 ├── README.md # 说明文档 └── img/ # 角色图片文件夹 ├── 1.png # 红蝶 ├── 2.png # 杰克 └── 3.png # 厂长使用方法
直接在浏览器中打开
333.html文件即可查看效果。技术栈
HTML5
CSS3 (Grid, Custom Properties, Mix Blend Mode)
原生 JavaScript
卡片全息效果原理
全息效果基于以下技术实现：
CSS 3D Transform -
rotateY和rotateX实现卡片倾斜Spring Physics - 使用弹性物理系统实现平滑动画
CSS Variables - 动态更新CSS变量控制效果参数
Background Layers - 多层背景叠加实现全息彩虹效果
Mix Blend Modes - 混合模式实现光效叠加
自定义图片
在
img/文件夹中替换自己的图片，并修改 HTML 中对应的图片路径：
<img src="img/你的图片.png" alt="角色名称" />同时在底部的卡片选择器中也需要同步修改：
<div class="card-selector__item" data-name="你的角色名" data-desc="角色描述"> <img src="img/你的图片.png" alt="角色名称" /> </div>参考
全息卡片效果参考自 poke-holo.simey.me
《第五人格全息闪卡展示页》是一款基于HTML5/CSS3/JS开发的角色展示网页，具有以下特色：1.采用第五人格暗黑风格UI设计，搭配血红色与金色配色；2.实现炫酷的3D全息卡片效果，支持鼠标悬停倾斜和彩虹光效；3.包含角色切换功能，底部缩略图可快速浏览不同角色；4.采用响应式设计，适配桌面和移动端；5.技术亮点包括CSS3D变换、弹性物理动画、多层背景叠加和混合模式。开源项目提供完整文件结构，用户可自定义图片和角色信息。