闪卡网页 第五人格 html 开源

「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

卡片全息效果原理

全息效果基于以下技术实现：

1. CSS 3D Transform - rotateY 和 rotateX 实现卡片倾斜

2. Spring Physics - 使用弹性物理系统实现平滑动画

3. CSS Variables - 动态更新CSS变量控制效果参数

4. Background Layers - 多层背景叠加实现全息彩虹效果

5. 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变换、弹性物理动画、多层背景叠加和混合模式。开源项目提供完整文件结构，用户可自定义图片和角色信息。