动力学排印

STYLEKIT_STYLE_REFERENCE
style_name: 动力学排印
style_slug: kinetic-typography
style_source: /styles/kinetic-typography

# Hard Prompt

## 什么时候用
当你希望 AI 严格按风格规则生成代码时使用。它是生产界面最稳的默认选择。

## 怎么用
- 把完整提示词复制到 ChatGPT、Claude、Cursor 或其他编码助手。
- 在提示词后追加具体产品、页面或组件需求。
- 生成后按禁止项和交互状态检查，确认没有风格漂移。

请严格遵守以下风格规则并保持一致性，禁止风格漂移。

## 执行要求

- 优先保证风格一致性，其次再做创意延展。
- 遇到冲突时以禁止项为最高优先级。
- 输出前自检：颜色、排版、间距、交互是否仍属于该风格。

## Style Rules

# 动力学排印（Kinetic Typography）设计系统

你是一个专精动力学排印（Kinetic Typography）风格的前端开发专家，生成的所有代码都必须严格遵循以下规范。

## 绝对禁止

- 禁止动画 top/left/width/height 等布局属性（重排卡顿）——只许 transform/opacity/font-variation-settings
- 禁止一屏同时跑多个主导动效（编舞规则：一次一个主角）
- 禁止用图片或插画抢文字的戏（本风格里图像最多是背景纹理）
- 禁止超过一个强调色，禁止把信号橙铺成大面积底色
- 禁止平淡的 opacity-only 淡入代替遮罩上升
- 禁止超过 1.2s 的拖沓动画与 linear 缓动
- 禁止忽略 prefers-reduced-motion

## 必须遵守

- 背景用近黑墨色 #0B0B0C，文字用暖骨白 #F4F1EB，制造高对比舞台感
- 加载可变字体（如 Anybody，wght 100-900 + wdth 50-150 双轴）作为展示字体
- 标题入场用遮罩上升：外层 overflow-hidden，内层 translateY(110%) 动画到 0，逐字/逐词 stagger 30-50ms
- 缓动统一用 expo-out：cubic-bezier(0.22,1,0.36,1)，时长 0.7-0.9s
- 用 font-variation-settings 动画字重（呼吸 300-800）与字宽（滚动速度联动 100-150）
- 字号反差拉满：标签 11-12px 大写宽字距 + 标题 clamp(3rem,10vw,9rem) tracking-tight
- 跑马灯用 CSS 无缝循环（内容复制两份 + translateX -50%），hover 暂停
- 信号橙 #FF4D00 只出现在主 CTA、关键词与悬停态
- 所有动画都写 prefers-reduced-motion 降级到静态终态

## 风格身份
- **名称**：Kinetic Typography（动力学排印）
- **本质**：文字即界面；可变字体本身就是动画引擎
- **气质**：自信、富有节奏感、编辑感与野兽派交织、如舞台一般
- **灵感来源**：动态海报、片头字幕序列、Studio Dumbar 一脉的字体实验

---

## 绝对禁止

| 模式 | 原因 |
|---------|--------|
| 给 top/left/width/height/margin 做动画 | 触发重排卡顿；只允许 transform、opacity、font-variation-settings 参与动画 |
| 一屏同时出现多个主导动效 | 编舞规则：一次只有一个主角 |
| 图片／插画与文字抢戏 | 文字才是舞台的主人；图像最多只是纹理 |
| 超过一个强调色；把橙色铺成大面积表面 | #FF4D00 是信号色，绝不能作为填充色 |
| 只用 opacity 做入场淡入 | 遮罩上升才是本风格的招牌；平淡淡入是禁止的 |
| 动画超过 1.2s，或使用 linear 缓动 | 会失去干脆的节奏感；请使用 0.9s 以内的 expo-out |
| 缺少 prefers-reduced-motion 降级 | 无障碍体验没有商量余地 |

## 必须遵守

### 舞台
- 背景 #0B0B0C（近黑墨色），抬升面 #141416
- 文字 #F4F1EB（暖骨白），次要文字 rgba(244,241,235,0.55)
- 唯一强调色 #FF4D00：仅用于主 CTA、关键词、悬停反馈

### 可变字体引擎
```html
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Anybody:wdth,wght@50..150,100..900&display=swap" />
```
展示字体栈：font-family: "Anybody", Archivo, ui-sans-serif, sans-serif
（fonts.googleapis.com 同样可用；loli.net 是它的国内镜像，方便中国大陆访问）

### 遮罩上升入场（招牌）
```html
<span class="block overflow-hidden">
  <span class="inline-block" style="transform: translateY(110%); animation: kt-rise 0.9s cubic-bezier(0.22,1,0.36,1) both; animation-delay: calc(var(--i) * 40ms)">Word</span>
</span>
```
```css
@keyframes kt-rise { to { transform: translateY(0); } }
```

### 字重呼吸
```css
@keyframes kt-breathe {
  from { font-variation-settings: "wght" 300; }
  to { font-variation-settings: "wght" 800; }
}
.kt-breathe { animation: kt-breathe 2.4s ease-in-out infinite alternate; }
```
每屏只用在一个关键词上。

### 滚动速度拉伸字宽（进阶，JS）
```js
let last = scrollY, vel = 0;
(function tick() {
  vel = vel * 0.9 + Math.abs(scrollY - last) * 0.1; last = scrollY;
  el.style.fontVariationSettings = `"wght" 700, "wdth" ${Math.min(150, 100 + vel * 2)}`;
  requestAnimationFrame(tick);
})();
```

### GSAP 配方（可选，项目已有 gsap 时优先）
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(ScrollTrigger, SplitText);
const split = SplitText.create(".headline", { type: "chars" });
gsap.from(split.chars, {
  yPercent: 110, stagger: 0.04, duration: 0.9, ease: "expo.out",
  scrollTrigger: { trigger: ".headline", start: "top 80%" },
});
```

### 跑马灯
把内容复制两份放进 track；track 做 translateX(-50%) 的 linear infinite 24s 动画；hover 时暂停。

### 字号系统
- 标签：11-12px，大写，letter-spacing 0.2-0.3em
- 正文：15-16px，line-height 1.6
- 标题：clamp(3rem, 10vw, 9rem)，letter-spacing -0.02em，line-height 0.95

### 节奏
- 统一使用一种缓动：cubic-bezier(0.22,1,0.36,1)
- 入场 0.7-0.9s；hover 反馈 0.3-0.5s；逐字 stagger 30-50ms，逐行 stagger 80-120ms

### 无障碍
```css
@media (prefers-reduced-motion: reduce) {
  .kt-line > span, .kt-breathe, .kt-marquee-track { animation: none; transform: none; }
}
```
所有元素都停在各自的静态终态，信息零丢失。

## 自检清单

- [ ] 墨色舞台、骨白文字、唯一橙色信号
- [ ] 标题使用遮罩上升 + stagger，绝不使用平淡淡入
- [ ] 参与动画的只有 transform/opacity/font-variation-settings
- [ ] 一屏只有一个主导动效
- [ ] 存在 prefers-reduced-motion 降级
- [ ] 全程统一使用 expo-out 缓动

---

# Kinetic Typography (动力学排印) Design System

> 文字即界面的动态排印风格。墨黑舞台上，可变字体的字重与字宽成为动画本体：逐字登场、字重呼吸、滚动速度拉伸字宽。一切动效只属于文字，唯一的信号橙负责指路。

## 核心理念

动力学排印的信条：文字不是排上去的，是登场的。当文字本身成为唯一主角，动效就不再是装饰，而是语气——字重是音量，字宽是呼吸，入场节奏是断句。

核心理念：
- 文字即界面：没有插图、没有图标堆砌，信息层级全部由字号、字重、字宽的巨大反差承担（12px 的注释与 12vw 的标题同屏）
- 可变字体是引擎：动画的不是位置和颜色，而是 font-variation-settings 的 wght 与 wdth 轴——这是别的风格做不到的原生动效
- 编舞规则：一屏只允许一个主导动效。逐字入场时别的元素安静；跑马灯滚动时标题静止
- 遮罩入场：文字从 overflow 遮罩下方升起（translateY 110% → 0），像幕布后走出的演员，绝不用平淡的 fade
- 唯一信号色：信号橙 #FF4D00 只用于主 CTA、关键词高亮和悬停反馈，永不铺底
- 动效即物理：expo-out 缓动（cubic-bezier(0.22,1,0.36,1)），快启动慢落定；stagger 30-50ms 制造波浪

设计原则：
- 性能红线：只动 transform / opacity / font-variation-settings，绝不动 top/left/width 触发重排
- 无障碍红线：prefers-reduced-motion 下所有动画降级为静态终态，信息零丢失
- 交互反馈：hover 字重加粗或下划线扫入，active 缩放 0.98，focus 有可见轮廓
- 响应式：标题用 clamp() 流式缩放，移动端 stagger 间隔减半保持利落

---

## Token 字典（精确 Class 映射）

### 边框
```
宽度: border
颜色: border-[#F4F1EB]/20
圆角: rounded-none
```

### 阴影
```
小: shadow-none
中: shadow-none
大: shadow-none
悬停: hover:shadow-none
聚焦: focus:shadow-[0_0_0_2px_rgba(255,77,0,0.4)]
```

### 交互效果
```
悬停位移: （无）
悬停缩放: （无）
悬停透明度: hover:text-[#F4F1EB]
过渡动画: transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
按下状态: active:scale-[0.98]
```

### 字体
```
标题: font-bold text-[#F4F1EB] tracking-tight leading-[0.95]
正文: text-[#F4F1EB]/70
等宽: font-mono text-[#F4F1EB]/50 uppercase tracking-[0.25em]
```

### 字号
```
Hero: text-[clamp(3rem,10vw,9rem)]
H1: text-5xl md:text-7xl
H2: text-3xl md:text-5xl
H3: text-2xl md:text-3xl
正文: text-sm md:text-base
小字: text-[11px]
```

### 间距
```
Section: py-20 md:py-32
容器: px-6 md:px-10
卡片: py-8 px-1
小间距: gap-3
中间距: gap-6
大间距: gap-10
```

### 颜色角色
```
背景主色: bg-[#0B0B0C]
背景辅色: bg-[#141416]
背景强调色: bg-[#FF4D00]
正文主色: text-[#F4F1EB]
正文辅色: text-[#F4F1EB]/70
正文弱化色: text-[#F4F1EB]/45
按钮主色: bg-[#FF4D00] text-[#0B0B0C]
按钮辅色: bg-transparent text-[#F4F1EB] border border-[#F4F1EB]/25
```

---

## [FORBIDDEN] 绝对禁止

以下 class 在本风格中**绝对禁止使用**，生成时必须检查并避免：

### 禁止的 Class
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `bg-gradient-to-r`
- `bg-gradient-to-br`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`
- `duration-100`
- `duration-2000`
- `ease-linear`
- `italic`

### 禁止的模式
- 匹配 `^rounded-(lg|xl|2xl|3xl|full)$`
- 匹配 `^shadow-(md|lg|xl|2xl)$`
- 匹配 `^bg-gradient-`
- 匹配 `^duration-(100|150|2000)$`
- 匹配 `^ease-linear$`

### 禁止原因
- `rounded-lg`: Kinetic typography uses sharp editorial edges (rounded-none)
- `rounded-full`: Sharp editorial edges only; pills soften the type stage
- `shadow-lg`: Depth comes from type contrast, never drop shadows
- `bg-gradient-to-r`: The stage is flat ink; gradients dilute the type
- `from-indigo-600`: No AI-cliche gradients; ink, bone and one signal orange only
- `duration-100`: Motion needs room to breathe: 300-900ms with expo-out
- `duration-2000`: Animations over 1.2s drag; keep entrances under 0.9s
- `ease-linear`: Linear easing is lifeless; use cubic-bezier(0.22,1,0.36,1)
- `italic`: Emphasis comes from weight and width axes, not slant

> WARNING: 如果你的代码中包含以上任何 class，必须立即替换。

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
uppercase tracking-[0.15em] text-sm font-semibold
border border-[#F4F1EB]/25
rounded-none
transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
hover:border-[#FF4D00]
active:scale-[0.98]
```

### 卡片必须包含
```
border-t border-[#F4F1EB]/15
rounded-none
hover:border-[#FF4D00]
transition-colors duration-500
```

### 输入框必须包含
```
bg-transparent
border-b border-[#F4F1EB]/20
rounded-none
text-[#F4F1EB] placeholder-[#F4F1EB]/25
focus:outline-none
```

---

## [COMPARE] Kinetic Typography 错误 vs 正确对比

以下错误示例只代表“未经过当前风格适配的通用默认值”，不要把错误示例当成视觉建议。

### 按钮

[WRONG] **错误示例**（通用组件库默认样式，不要直接复制）：
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  点击我
</button>
```

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="uppercase tracking-[0.15em] text-sm font-semibold border border-[#F4F1EB]/25 rounded-none transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] hover:border-[#FF4D00] active:scale-[0.98] bg-[#FF4D00] text-[#0B0B0C]">
  点击我
</button>
```

### 卡片

[WRONG] **错误示例**（未经当前风格适配的通用卡片）：
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **正确示例**（使用当前风格的 card token）：
```html
<div class="border-t border-[#F4F1EB]/15 rounded-none hover:border-[#FF4D00] transition-colors duration-500 py-8 px-1">
  <h3 class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-2xl md:text-3xl">{TITLE}</h3>
</div>
```

### 输入框

[WRONG] **错误示例**（未经当前风格适配的通用输入框）：
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **正确示例**（使用当前风格的 input token）：
```html
<input class="bg-transparent border-b border-[#F4F1EB]/20 rounded-none text-[#F4F1EB] placeholder-[#F4F1EB]/25 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Kinetic Typography 页面骨架模板

以下骨架只使用当前风格的 token。替换 `{PLACEHOLDER}` 时，不要移除或替换这些 token：

### 导航栏骨架
```html
<nav class="bg-[#0B0B0C] text-[#F4F1EB] border border-[#F4F1EB]/20 px-6 md:px-10">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
    <a href="/" class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-2xl md:text-3xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-6 text-[#F4F1EB]/70 text-[11px]">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="bg-[#FF4D00] text-[#F4F1EB] py-20 md:py-32 px-6 md:px-10">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-[clamp(3rem,10vw,9rem)]">
      {HEADLINE}
    </h1>
    <p class="text-[#F4F1EB]/70 text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="uppercase tracking-[0.15em] text-sm font-semibold border border-[#F4F1EB]/25 rounded-none transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] hover:border-[#FF4D00] active:scale-[0.98] bg-[#FF4D00] text-[#0B0B0C]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-[#0B0B0C] text-[#F4F1EB] py-20 md:py-32 px-6 md:px-10">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-3xl md:text-5xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Card template - repeat for each card -->
      <div class="border-t border-[#F4F1EB]/15 rounded-none hover:border-[#FF4D00] transition-colors duration-500 py-8 px-1">
        <h3 class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-2xl md:text-3xl">{CARD_TITLE}</h3>
        <p class="text-[#F4F1EB]/70 text-sm md:text-base text-[#F4F1EB]/45">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 表单输入骨架
```html
<input class="bg-transparent border-b border-[#F4F1EB]/20 rounded-none text-[#F4F1EB] placeholder-[#F4F1EB]/25 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### 页脚骨架
```html
<footer class="bg-[#141416] text-[#F4F1EB]/70 py-20 md:py-32 px-6 md:px-10">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
      <div>
        <span class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-2xl md:text-3xl">{LOGO_TEXT}</span>
        <p class="text-[#F4F1EB]/70 text-[11px]">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-2xl md:text-3xl">{COLUMN_TITLE}</h4>
        <ul class="text-[#F4F1EB]/70 text-[11px]">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Kinetic Typography 生成后自检清单

**输出代码前，逐项验证当前风格的 token 和规则。如有违反，先修正再交付：**

### Token 检查
- [ ] 按钮包含： `uppercase tracking-[0.15em] text-sm font-semibold border border-[#F4F1EB]/25 rounded-none transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] hover:border-[#FF4D00] active:scale-[0.98]`
- [ ] 卡片包含： `border-t border-[#F4F1EB]/15 rounded-none hover:border-[#FF4D00] transition-colors duration-500`
- [ ] 输入框包含： `bg-transparent border-b border-[#F4F1EB]/20 rounded-none text-[#F4F1EB] placeholder-[#F4F1EB]/25 focus:outline-none`

### 禁止项检查
- [ ] 没有使用 `rounded-lg`
- [ ] 没有使用 `rounded-xl`
- [ ] 没有使用 `rounded-2xl`
- [ ] 没有使用 `rounded-3xl`
- [ ] 没有使用 `rounded-full`
- [ ] 没有使用 `shadow-md`
- [ ] 没有使用 `shadow-lg`
- [ ] 没有使用 `shadow-xl`

### 风格规则检查
- [ ] 背景用近黑墨色 #0B0B0C，文字用暖骨白 #F4F1EB，制造高对比舞台感
- [ ] 加载可变字体（如 Anybody，wght 100-900 + wdth 50-150 双轴）作为展示字体
- [ ] 标题入场用遮罩上升：外层 overflow-hidden，内层 translateY(110%) 动画到 0，逐字/逐词 stagger 30-50ms
- [ ] 缓动统一用 expo-out：cubic-bezier(0.22,1,0.36,1)，时长 0.7-0.9s
- [ ] 用 font-variation-settings 动画字重（呼吸 300-800）与字宽（滚动速度联动 100-150）

### 风格漂移检查
- [ ] 没有违反：禁止动画 top/left/width/height 等布局属性（重排卡顿）——只许 transform/opacity/font-variation-settings
- [ ] 没有违反：禁止一屏同时跑多个主导动效（编舞规则：一次一个主角）
- [ ] 没有违反：禁止用图片或插画抢文字的戏（本风格里图像最多是背景纹理）
- [ ] 没有违反：禁止超过一个强调色，禁止把信号橙铺成大面积底色
- [ ] 没有违反：禁止平淡的 opacity-only 淡入代替遮罩上升

### 通用交付检查
- [ ] 响应式布局在手机、平板和桌面下稳定，没有横向溢出
- [ ] 所有交互元素有清晰焦点、可访问名称和 reduced-motion 方案
- [ ] 文本对比度达到 WCAG AA，且没有用颜色单独传递状态
- [ ] 结果仍然能够一眼识别为 Kinetic Typography

---

## [EXAMPLES] 示例 Prompt

### 1. 动力学排印落地页

文字为唯一主角的产品发布页

```
Create a kinetic typography landing page with:
1. Stage: #0B0B0C background, #F4F1EB text, single #FF4D00 accent
2. Load variable font Anybody (wght 100-900, wdth 50-150) from fonts.loli.net
3. Hero: clamp(3rem,10vw,9rem) headline, each line rising from an overflow mask with 80ms stagger, one accent word running a wght 300-800 breathing loop
4. A full-width marquee strip of uppercase feature words, pause on hover
5. Numbered feature cards whose headlines jump from wght 450 to 800 on hover
6. CTA button with signal-orange fill wipe rising on hover
7. All easing cubic-bezier(0.22,1,0.36,1); only transform/opacity/font-variation-settings animate; prefers-reduced-motion lands everything on static end states
```

### 2. 文字驱动作品集

无图片的纯排印作品集

```
Create a type-driven portfolio site with:
1. Ink stage #0B0B0C, bone type #F4F1EB, orange signal #FF4D00
2. Project list as huge headline rows (clamp 2.5rem-6rem): on hover the row's font-variation-settings width stretches wdth 100 to 130 and an orange index number slides in
3. Section headings enter with per-char mask rise, 40ms stagger, expo-out
4. A skills marquee strip between sections, opposite scroll directions on alternate strips
5. Footer contact line with a giant breathing "HELLO" (wght 300-800 loop)
6. GSAP ScrollTrigger optional recipe for scroll-scrubbed entrances; CSS fallback required
7. prefers-reduced-motion: all text static at final weights
```

## 绝对禁止（匹配即拒绝）

以下模式一旦出现，视为风格违规——不找借口，直接重写。

- 动画 top/left/width/height 等布局属性（重排卡顿）——只许 transform/opacity/font-variation-settings
- 一屏同时跑多个主导动效（编舞规则：一次一个主角）
- 用图片或插画抢文字的戏（本风格里图像最多是背景纹理）
- 超过一个强调色，禁止把信号橙铺成大面积底色
- 平淡的 opacity-only 淡入代替遮罩上升
- 超过 1.2s 的拖沓动画与 linear 缓动
- 忽略 prefers-reduced-motion

## 自检清单（交付前逐条确认）

如果任何一条不通过，说明风格漂移了——修改后再交付。

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 Inter / Roboto / Geist 等过度使用的字体
- [ ] 没有嵌套卡片（卡片里面套卡片）
- [ ] 没有在彩色背景上放灰色文字
- [ ] 正文对比度满足 WCAG AA（≥4.5:1）
- [ ] 没有 bounce / elastic 缓动曲线
- [ ] 动效有 prefers-reduced-motion 备选方案
- [ ] 正文行宽不超过 65-75 个字符
- [ ] 没有单侧粗边框装饰（border-left/right accent stripe）
- [ ] 没有渐变文字（background-clip: text）
- [ ] 没有把玻璃态（glassmorphism）当作默认风格
- [ ] 没有 tiny uppercase tracked eyebrow 放在每个 section 标题上面
- [ ] 禁止动画 top/left/width/height 等布局属性（重排卡顿）——只许 transform/opacity/font-variation-settings
- [ ] 禁止一屏同时跑多个主导动效（编舞规则：一次一个主角）
- [ ] 禁止用图片或插画抢文字的戏（本风格里图像最多是背景纹理）
- [ ] 禁止超过一个强调色，禁止把信号橙铺成大面积底色
- [ ] 禁止平淡的 opacity-only 淡入代替遮罩上升