暗色石刻背景中央展示一张卡背，点击后转出卡牌正面，左右按钮用于循环浏览四张卡牌。鼠标停留时，卡片周围浮出彩色粒子与光晕；正面朝向浏览者时，移动鼠标还能改变卡面的倾斜角度。双击开启悬浮状态后，卡牌保持正面展示并上下浮动，再次双击可以关闭。素材使用CSS＋原生 JavaScript，没有引入动画框架：正反面与光影由 CSS 绘制，脚本负责卡片切换、粒子生成和交互状态。

卡牌翻转展示包含哪些交互效果

按钮与方向键共用切换逻辑。左右按钮和键盘方向键都能切换卡牌，到列表末尾后继续循环，切换时清除上一张的翻面与悬浮状态。
粒子颜色跟随卡牌变化。四张卡分别搭配紫、红、蓝、白色光效，每次生成五十个粒子，位置、大小、动画时长和延迟随机分配。
翻面、倾斜和悬浮各有触发方式。点击看正面，移动鼠标看倾斜，双击看持续悬浮，一张卡牌可以演示多种展示状态。

JS翻牌怎样处理双击与鼠标倾斜

其一，浏览器的双击会伴随单击事件，直接将两个处理函数叠在一起，容易先翻回卡背再判断激活状态。这里给单击留出短暂的判断时间，双击到来时取消待执行的翻面操作，随后保持正面并切换悬浮状态。单击因此带有少量响应延迟，这是区分两类操作的取舍。

其二，倾斜角度由鼠标在卡片内的相对位置计算。指针靠近边缘时，卡面沿两个轴轻微转动；离开卡片后恢复正常翻面角度。悬浮时暂停这段鼠标倾斜逻辑，关键帧同时保留正面的半圈旋转，避免上下移动覆盖翻面变换。

const tiltX = (y - 0.5) * 20;

粒子翻牌的图片与光效如何替换

卡背、四张卡面和背景都放在 img 目录，图片引用在 style.css 中；卡片名称与顶部操作说明位于 index.html。CSS 顶部提供宽高、圆角与主要光效颜色变量，粒子数量及随机范围在 script.js 的 createParticles 中调整。想降低视觉密度，可以减少粒子数量、缩短光晕扩散范围，或取消底部提示的闪烁。想换成藏品、角色或商品展示，先准备比例一致的卡面，再修改对应名称和图片路径；下载后可查看完整粒子生成和切换实现。

粒子卡牌展示的操作与适用范围

为什么点击后要稍等才翻面？

脚本会短暂等待，以判断这次操作是单击还是双击。连续双击开启悬浮，再次双击关闭；切换到其他卡牌时会重置状态。如果业务只需要翻面，可以改成单一点击入口，去掉双击功能与对应的等待逻辑。

手机上也能看到全部效果吗？

点击翻面和按钮切换可以用于触屏，鼠标跟随倾斜则面向桌面指针设备。手机浏览器对双击的识别可能与桌面不同，若手机是主要使用场景，建议将悬浮改成独立按钮。页面使用 CSS 三维变换与关键帧动画，实际展示效果应在目标设备中确认。

这套素材带抽卡、战斗或后台功能吗？

当前是四张固定图片的前端展示组件，包含翻面、循环切换、粒子光效和悬浮，不含抽卡概率、战斗规则、账户或后台接口。用于实际产品时，需要另行接入数据和业务逻辑；现有图片均为本地资源，展示过程不依赖远程图片服务。

适合卡牌图鉴、角色介绍、收藏品展示与需要光效反馈的专题页面。下载完整源码后，可以替换图片、修改粒子配色，并将展示交互接入自己的页面。