Pokemon Cards CSS 效果 ¶

这是一个用纯 CSS 实现的宝可梦卡片全息效果演示。

鼠标悬停在卡片上，移动鼠标，可以看到 3D 倾斜和彩虹光泽。

皮卡丘

喷火龙

超梦

水箭龟

原理：只用 CSS 为什么能做出这种效果？¶

pokemon-cards-css 这个项目没有任何 WebGL、Canvas 或复杂图形库。它的秘密是多层叠加 + 混合模式。

1. 3D 倾斜（Perspective + Rotate）¶

.pokemon-card {
  perspective: 1200px;          /* 透视深度 */
  transform-style: preserve-3d; /* 子元素保持 3D */
}

.pokemon-card__frame {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(16px);
}

• perspective 决定 " 眼睛离卡片多远 "，值越大越扁平，越小越夸张
• rotateX 控制上下倾斜，rotateY 控制左右倾斜
• translateZ 让卡片朝你 " 浮起来 "
• JS 根据鼠标位置实时计算 --rx 和 --ry

2. 彩虹光泽（Conic Gradient + Color Dodge）¶

.pokemon-card__shine {
  mix-blend-mode: color-dodge;  /* 关键！让颜色像光一样叠加 */
  background:
    radial-gradient(...),       /* 中心白光 */
    conic-gradient(...);         /* 环形彩虹 */
}

这是整个效果最核心的部分：

• conic-gradient：从中心向外发散的锥形渐变，一圈彩虹色
• radial-gradient：叠加一个白色光斑，模拟光源中心
• mix-blend-mode: color-dodge：混合模式，让亮部更亮，暗部透出底层图片
• filter: brightness(1.3) contrast(1.2)：进一步提升对比度，让光泽更 " 闪 "

3. 白色眩光（Overlay Glare）¶

.pokemon-card__glare {
  mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 25%, white 48%, transparent 52%);
}

一条倾斜的白色渐变带，随着鼠标移动划过卡片表面，模拟塑料卡片的反光。

4. 边缘发光（Conic Border）¶

.pokemon-card__frame::after {
  background: conic-gradient(from var(--angle), ...);
  -webkit-mask: ...;  /* 只保留边框 */
}

用 conic-gradient 做彩虹边框，再用 mask 裁成只有边缘显示。鼠标移动时 --angle 旋转，边框颜色跟着变。

如果你想做自己的卡片 ¶

需要准备什么 ¶

最简单的制作流程 ¶

1. 找一张你喜欢的卡片图（游戏王、炉石、自己的设计都可以）
2. 把上面的 CSS 复制过去
3. 换掉 src 里的图片地址
4. 调整 aspect-ratio 匹配你的图片比例

图片资源从哪来 ¶

• 宝可梦官方：https://images.pokemontcg.io/{系列}/{编号}.png
• 系列代码：base1（初代）、swsh1（剑盾）等
• 编号：卡片在系列里的序号
• 游戏王：项目 YGOPro 或各种 wiki 有高清卡图
• 自己设计：用 Figma / PS 做一张 734×1024 的卡片，导出 PNG

进阶玩法 ¶

参考 ¶

• pokemon-cards-css 原项目
• 在线演示
• CSS-Tricks 原文章