---
title: 神秘卡 MysteryCard
url: https://ui.zhaozimin.com/components/mystery-card/
markdown: https://ui.zhaozimin.com/components/mystery-card.md
group: 组件
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/components/v4/MysteryCard.jsx  # https://ui.zhaozimin.com/src/system/components/v4/MysteryCard.jsx
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 神秘卡 MysteryCard

> 尚未揭晓的课：3D 绸缎遮罩、朱印封蜡、一道流光，悬停时微微掀起。不显示名称和价格，也不能购买。

### 样张 · 把鼠标移上去

React：

```jsx
import { MysteryCard } from './components/v4/MysteryCard.jsx'

export default function MysteryCardDemo() {
  return (
    <div style={{ width: 266, maxWidth: '100%' }}>
      <MysteryCard />
    </div>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div style="width: 266px; max-width: 100%">
  <div
    role="img"
    aria-label="敬请期待：一门尚未揭晓的课程"
    style="
      position: relative;
      width: 100%;
      aspect-ratio: 266 / 316;
      border-radius: 16px;
      transform: none;
      transition:
        transform 0.5s cubic-bezier(0.2, 0.75, 0.2, 1),
        box-shadow 0.5s;
      box-shadow:
        0 30px 48px -26px rgba(6, 6, 12, 0.55),
        0 5px 14px rgba(0, 0, 0, 0.3);
    "
  >
    <style>
      @keyframes zzmMysterySheen {
        0% {
          transform: translateX(-46%);
        }
        58% {
          transform: translateX(135%);
        }
        100% {
          transform: translateX(135%);
        }
      }
    </style>
    <div
      style="
        position: absolute;
        inset: 0;
        border-radius: 16px;
        overflow: hidden;
        background:
          radial-gradient(150% 92% at 50% 30%, rgba(255, 255, 255, 0.1), transparent 50%),
          linear-gradient(
            101deg,
            transparent 0 5%,
            rgba(255, 255, 255, 0.05) 10%,
            transparent 18%,
            rgba(0, 0, 0, 0.24) 28%,
            transparent 38%,
            rgba(255, 255, 255, 0.055) 50%,
            transparent 60%,
            rgba(0, 0, 0, 0.22) 70%,
            transparent 79%,
            rgba(255, 255, 255, 0.04) 88%,
            transparent 100%
          ),
          linear-gradient(159deg, #28282f 0%, #16161c 47%, #0a0a0e 100%);
      "
    >
      <div
        style="
          position: absolute;
          inset: -24% -46%;
          pointer-events: none;
          background: linear-gradient(
            112deg,
            transparent 36%,
            rgba(214, 218, 238, 0.19) 46%,
            rgba(255, 255, 255, 0.06) 51%,
            transparent 64%
          );
          animation: zzmMysterySheen 6.8s ease-in-out infinite;
        "
      ></div>
      <div
        style="
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 58px;
          background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
        "
      ></div>
    </div>
    <div
      style="
        position: absolute;
        top: 15px;
        left: 15px;
        font-family: var(--zzm-mono);
        font-size: 9.5px;
        letter-spacing: 0.26em;
        color: rgba(232, 228, 220, 0.5);
      "
    >
      即将揭晓
    </div>
    <div
      style="
        position: absolute;
        left: 50%;
        top: 41%;
        transform: translate(-50%, -50%);
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: radial-gradient(circle at 37% 30%, #c25642, #93382a 60%, #6d2519);
        box-shadow:
          inset 0 2px 5px rgba(255, 222, 210, 0.32),
          inset 0 -5px 10px rgba(0, 0, 0, 0.42),
          0 7px 16px rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <svg width="34" height="34" viewBox="0 0 40 40" aria-hidden="true">
        <path
          d="M20 3 L23.4 16.6 L37 20 L23.4 23.4 L20 37 L16.6 23.4 L3 20 L16.6 16.6 Z"
          fill="#ede7dc"
          opacity=".92"
        ></path>
      </svg>
    </div>
    <div
      style="
        position: absolute;
        left: 0;
        right: 0;
        top: calc(41% + 56px);
        text-align: center;
        color: rgba(237, 231, 220, 0.9);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.44em;
        padding-left: 0.44em;
      "
    >
      敬请期待
    </div>
    <div
      style="
        position: absolute;
        left: 14%;
        right: 14%;
        bottom: 20px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent, var(--zzm-accent, #a6402f), transparent);
        opacity: 0;
        transition: opacity 0.5s;
      "
    ></div>
  </div>
</div>
```

## 刻意的例外

3D 绸缎是这套系统里**有意为之的例外**，专为「神秘感」破例；配色仍守黑白灰加一枚朱色封蜡。它自带全部样式（包括注入自己的 `@keyframes zzmMysterySheen`），尺寸随网格走（宽高比 266 : 316）。

只有一种用法：课程目录里 `comingSoon` 的课渲染成它。不要把这种质感用到别的地方。

## 铁律

- ✓ 要：只用于尚未上线的课程
- ✗ 不要：把 3D、流光这类效果搬到普通卡片上

---

上一页：[封面图](https://ui.zhaozimin.com/components/cover-image.md) · 下一页：[星图](https://ui.zhaozimin.com/components/star-map.md) · 全站目录：https://ui.zhaozimin.com/llms.txt