Sonder

TV动画《我心里危险的东西》官网开屏动画复刻

Fri, 24 Jul 2026 00:00:00 GMT

TV 动画《我心里危险的东西》（Boku no Kokoro no Yabai Yatsu / 简称 Bokuyaba）官方网站（bokuyaba-anime.com）在页面首次载入时，展现了一套精致优雅的开屏动画。它通过将 Logo 标题分割为多个独立的 SVG/PNG 图层，在经过短暂的圆环 Loader 旋转预载后，各个分图层从不同的倾斜、缩放与偏移位置按特定时间差平滑拼合归位，营造出极具仪式感的开场视觉冲力。

本文将详细剖析这套动画的核心实现原理，并附上完整的复刻源代码。

动画效果演示#

以下为复刻实现的开屏动画效果实录：

TV动画《我心里危险的东西》官网开屏动画复刻

核心实现技术拆解#

整个开屏动画由三个关键阶段构成：独立圆环旋转加载（0.6s） →\rightarrow→ 多图层延时分层组装 →\rightarrow→ 淡出解封主界面。

1. 0.6s 独立旋转 Loader 动画#

在开屏动画尚未播放之前，界面中央会优先展示一个轻量的旋转加载圈。它不需要复杂的图片资源，仅通过 CSS 伪元素与 keyframes 即可实现：

l-wrap__loader 旋转加载圈样式展开收起

1
.l-wrap__loader::before {
2
  content: "";
3
  width: 100%;
4
  height: 100%;
5
  display: block;
6
  position: absolute;
7
  top: 0;
8
  left: 0;
9
  border-radius: 50%;
10
  border: 0.3rem solid #ffffff;
11
  border-top: 0.3rem solid #fb32ca; /* 突出粉色描边 */
12
  animation: rotate 0.6s linear infinite;
13
  box-sizing: border-box;
14
}
15

16
@keyframes rotate {
17
  0% { transform: rotate(0deg); }
18
  100% { transform: rotate(360deg); }
19
}

展开收起

当 DOM 加载完毕并经过 600ms 后，通过给 body 容器添加 .is-op 类，加载圈的 opacity 会在 0.5s 内平滑过渡为 0 并隐藏。

2. Logo 9 图层拆分与初始形变设置#

官方将 Logo 拆分成了 9 个独立图层（logo_1.png ~ logo_9.png 与 logo_11.png）。为了让各个拆分块在拼合时产生错落有致的入场效果，初始状态（未添加 .is-op 类）下为不同的图层单独设定了缩放比例、位移偏移量以及旋转中心点（transform-origin）：

Logo 各分图层初始状态设置展开收起

1
.p-op__logo-item {
2
  position: relative;
3
  opacity: 0;
4
  filter: brightness(120%) blur(8px);
5
  transform: scale(1.05);
6
}
7

8
/* 各分图层的个性化偏移与旋转中心点 (transform-origin) */
9
.p-op__logo-item:nth-of-type(1) {
10
  transform: translate3d(0, 0, 0) scale(1.1);
11
}
12
.p-op__logo-item:nth-of-type(2) {
13
  transform: translate3d(0, -15px, 0) scale(1.05);
14
}
15
.p-op__logo-item:nth-of-type(3) {
16
  transform: translate3d(-10px, 0, 0) scale(1.05);
17
  transform-origin: 65.3% 24.4%;
18
}
19
.p-op__logo-item:nth-of-type(5) {
20
  transform: translate3d(0, 0, 0) scale(1.35);
21
  transform-origin: 17.9% 74.8%;
22
}
23
.p-op__logo-item:nth-of-type(9) {
24
  transform: translate3d(6px, 0, 0) scale(0.8);
25
  transform-origin: 91.8% 58.1%;
26
}

展开收起

Note

针对带有旋转和缩放的某些文字图层，精确定位 transform-origin 是确保其在缩放归位过程中轨迹自然的秘诀。

3. 三阶贝塞尔缓动与序次延时 (Transition Delay)#

当触发开屏状态（类名变为 .is-op）时，所有图层的 transform 均归位为 translate3d(0, 0, 0) scale(1)，opacity 恢复为 1，blur 变为 0。

为了实现依次弹入的效果，各图层配置了不同的 transition-delay 步频：

Logo 归位过渡与延时控制展开收起

1
.is-op .p-op__logo-item {
2
  opacity: 1;
3
  filter: brightness(100%) blur(0);
4
  transform: translate3d(0, 0, 0) scale(1);
5
  transition: transform cubic-bezier(0.01, 0.53, 0.37, 0.99) 1s,
6
              opacity cubic-bezier(0.5, 1, 0.89, 1) 1s,
7
              filter cubic-bezier(0.5, 1, 0.89, 1) 1s;
8
}
9

10
/* 阶梯式动画触发延迟 */
11
.is-op .p-op__logo-item:nth-of-type(1) { transition-delay: 0.9s; }
12
.is-op .p-op__logo-item:nth-of-type(2) { transition-delay: 1.22s; }
13
.is-op .p-op__logo-item:nth-of-type(3) { transition-delay: 1.54s; }
14
.is-op .p-op__logo-item:nth-of-type(4) { transition-delay: 1.86s; }
15
.is-op .p-op__logo-item:nth-of-type(5) { transition-delay: 2.41s; }
16
.is-op .p-op__logo-item:nth-of-type(6) { transition-delay: 2.65s; }
17
.is-op .p-op__logo-item:nth-of-type(7) { transition-delay: 2.89s; }
18
.is-op .p-op__logo-item:nth-of-type(8) { transition-delay: 3.13s; }
19
.is-op .p-op__logo-item:nth-of-type(9) { transition-delay: 3.37s; }

展开收起

使用的三次贝塞尔曲线 cubic-bezier(0.01, 0.53, 0.37, 0.99) 前段急速冲刺、后段吸附减速，使整个组装动画非常具有吸附感。

4. 状态机控制与强制重绘 (Reflow)#

通过 JavaScript 来切换控制类 is-op，并在重新播放动画时利用访问 offsetWidth 触发浏览器强制重绘（Reflow），以重置动画状态：

动画重新播放控制逻辑

1
function playAnimation() {
2
  document.body.classList.remove('is-op', 'is-load');
3

4
  // 强制触发浏览器重绘 (Reflow)，重置 CSS 过渡与 keyframes 动画
5
  void document.body.offsetWidth;
6

7
  const delay = parseInt(document.getElementById('loaderDuration').value, 10) || 600;
8

9
  // 定时器进入开屏 Logo 组装阶段
10
  setTimeout(() => {
11
    document.body.classList.add('is-op');
12
  }, delay);
13
}

完整源代码#

点击下方展开框即可查阅并复制包含 HTML、CSS 与 JS 控制面板的完整复刻源码：

点击展开查看完整 op_animation.html 源代码

op_animation.html展开收起

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>TV动画《我心里危险的东西》- 开屏动画还原</title>
7
  <style>
8
    :root {
9
      --winH: 100vh;
10
      --color-black: #333;
11
      --color-white: #fff;
12
      --color-pink: #fb32ca;
13
    }
14

15
    html {
16
      width: 100%;
17
      font-size: 62.5%;
18
      overflow-x: hidden;
19
      overflow-y: auto;
20
    }
21
    @media screen and (max-width: 960px) and (min-width: 561px) {
22
      html { font-size: 68.75%; }
23
    }
24
    @media screen and (max-width: 960px) and (min-width: 751px) {
25
      html { font-size: 78.125%; }
26
    }
27

28
    body {
29
      width: 100%;
30
      height: 100vh;
31
      margin: 0;
32
      padding: 0;
33
      font-size: 1.6rem;
34
      line-height: 1.3;
35
      letter-spacing: 0.15rem;
36
      font-weight: 500;
37
      color: var(--color-black);
38
      background: #ffffff;
39
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
40
      overflow: hidden;
41
      user-select: none;
42
    }
43

44
    img {
45
      max-width: 100%;
46
      display: block;
47
      vertical-align: middle;
48
    }
49

50
    /* 容器与加载圈 */
51
    .l-wrap {
52
      display: block;
53
      position: relative;
54
      width: 100%;
55
      height: 100vh;
56
      z-index: 0;
57
    }
58

59
    .l-wrap__loader {
60
      height: 6rem;
61
      width: 6rem;
62
      display: block;
63
      position: fixed;
64
      top: 50%;
65
      left: 50%;
66
      z-index: 15;
67
      transform: translate(-50%, -50%);
68
      pointer-events: none;
69
      opacity: 1;
70
      transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
71
    }
72
    @media screen and (max-width: 960px) {
73
      .l-wrap__loader {
74
        height: 3rem;
75
        width: 3rem;
76
      }
77
    }
78

79
    .is-op .l-wrap__loader,
80
    .is-load .l-wrap__loader {
81
      opacity: 0;
82
    }
83

84
    .l-wrap__loader::before {
85
      content: "";
86
      width: 100%;
87
      height: 100%;
88
      display: block;
89
      position: absolute;
90
      top: 0;
91
      left: 0;
92
      border-radius: 50%;
93
      border: 0.3rem solid var(--color-white);
94
      border-top: 0.3rem solid var(--color-pink);
95
      animation: rotate 0.6s linear infinite;
96
      z-index: 20;
97
      pointer-events: none;
98
      box-sizing: border-box;
99
    }
100

101
    @keyframes rotate {
102
      0% { transform: rotate(0deg); }
103
      100% { transform: rotate(360deg); }
104
    }
105

106
    /* 开屏动画层 */
107
    .p-op {
108
      display: flex;
109
      align-items: center;
110
      justify-content: center;
111
      position: fixed;
112
      top: 0;
113
      left: 0;
114
      width: 100%;
115
      height: 100%;
116
      overflow: hidden;
117
      z-index: 100;
118
      pointer-events: none;
119
    }
120
    .is-op .p-op {
121
      pointer-events: auto;
122
    }
123
    .is-load .p-op {
124
      opacity: 0;
125
      transition: opacity 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
126
      pointer-events: none;
127
    }
128

129
    .p-op__logo {
130
      position: relative;
131
      width: 82%;
132
      max-width: 550px;
133
      transform: translateY(5%) scale(1.15);
134
    }
135
    .is-op .p-op__logo {
136
      transform: translateY(5%) scale(1);
137
      transition: transform 12s cubic-bezier(0.5, 1, 0.89, 1), filter 0.55s;
138
    }
139

140
    .p-op__logo-item {
141
      position: relative;
142
      opacity: 0;
143
      filter: brightness(120%) blur(8px);
144
      transform: scale(1.05);
145
    }
146
    .p-op__logo-item:not(:first-of-type) {
147
      position: absolute;
148
      top: 0;
149
      left: 0;
150
      width: 100%;
151
    }
152

153
    /* 初始拆分偏移及缩放设置 */
154
    .p-op__logo-item:nth-of-type(1) { transform: translate3d(0, 0, 0) scale(1.1); }
155
    .p-op__logo-item:nth-of-type(2) { transform: translate3d(0, -15px, 0) scale(1.05); }
156
    .p-op__logo-item:nth-of-type(3) { transform: translate3d(-10px, 0, 0) scale(1.05); transform-origin: 65.3% 24.4%; }
157
    .p-op__logo-item:nth-of-type(4) { transform: translate3d(-2px, -2px, 0) scale(0.9); transform-origin: 86.2% 21.4%; }
158
    .p-op__logo-item:nth-of-type(5) { transform: translate3d(0, 0, 0) scale(1.35); transform-origin: 17.9% 74.8%; }
159
    .p-op__logo-item:nth-of-type(6) { transform: translate3d(15px, 0, 0) scale(1.05); }
160
    .p-op__logo-item:nth-of-type(7) { transform: translate3d(5px, 0, 0) scale(1.01); }
161
    .p-op__logo-item:nth-of-type(8) { transform: translate3d(5px, 0, 0) scale(1.01); }
162
    .p-op__logo-item:nth-of-type(9) { transform: translate3d(6px, 0, 0) scale(0.8); transform-origin: 91.8% 58.1%; }
163

164
    /* is-op 状态下的动画归位 */
165
    .is-op .p-op__logo-item {
166
      opacity: 1;
167
      filter: brightness(100%) blur(0);
168
      transform: translate3d(0, 0, 0) scale(1);
169
      transition: transform cubic-bezier(0.01, 0.53, 0.37, 0.99) 1s,
170
                  opacity cubic-bezier(0.5, 1, 0.89, 1) 1s,
171
                  filter cubic-bezier(0.5, 1, 0.89, 1) 1s;
172
    }
173
    .is-op .p-op__logo-item:nth-of-type(1) { transition-delay: 0.9s; }
174
    .is-op .p-op__logo-item:nth-of-type(2) { transition-delay: 1.22s; }
175
    .is-op .p-op__logo-item:nth-of-type(3) { transition-delay: 1.54s; }
176
    .is-op .p-op__logo-item:nth-of-type(4) { transition-delay: 1.86s; }
177
    .is-op .p-op__logo-item:nth-of-type(5) { transition-delay: 2.41s; }
178
    .is-op .p-op__logo-item:nth-of-type(6) { transition-delay: 2.65s; }
179
    .is-op .p-op__logo-item:nth-of-type(7) { transition-delay: 2.89s; }
180
    .is-op .p-op__logo-item:nth-of-type(8) { transition-delay: 3.13s; }
181
    .is-op .p-op__logo-item:nth-of-type(9) { transition-delay: 3.37s; }
182
    .is-op .p-op__logo-item:nth-of-type(10) { transition-delay: 3.61s; }
183

184
    /* 控制面板 */
185
    .controls {
186
      position: fixed;
187
      bottom: 24px;
188
      left: 50%;
189
      transform: translateX(-50%);
190
      z-index: 1000;
191
      background: rgba(255, 255, 255, 0.9);
192
      backdrop-filter: blur(12px);
193
      border: 1px solid rgba(251, 50, 202, 0.2);
194
      padding: 12px 24px;
195
      border-radius: 40px;
196
      display: flex;
197
      align-items: center;
198
      gap: 16px;
199
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
200
      font-size: 14px;
201
    }
202
    .btn-replay {
203
      background: linear-gradient(135deg, #fb32ca, #e012ac);
204
      color: #fff;
205
      border: none;
206
      padding: 8px 20px;
207
      border-radius: 20px;
208
      font-weight: 600;
209
      cursor: pointer;
210
      box-shadow: 0 4px 12px rgba(251, 50, 202, 0.3);
211
    }
212
  </style>
213
</head>
214
<body>
215

216
<div class="l-wrap js-wrap">
217
  <div class="l-wrap__loader"></div>
218
  <div class="l-wrap__cover">
219
    <div class="p-op" id="js-op">
220
      <div class="p-op__logo">
221
        <div class="p-op__logo-item"><img src="./assets/img/op/logo_1.png" alt=""></div>
222
        <div class="p-op__logo-item"><img src="./assets/img/op/logo_2.png" alt=""></div>
223
        <div class="p-op__logo-item"><img src="./assets/img/op/logo_3.png" alt=""></div>
224
        <div class="p-op__logo-item"><img src="./assets/img/op/logo_4.png" alt=""></div>
225
        <div class="p-op__logo-item"><img src="./assets/img/op/logo_5.png" alt=""></div>
226
        <div class="p-op__logo-item"><img src="./assets/img/op/logo_6.png" alt=""></div>
227
        <div class="p-op__logo-item"><img src="./assets/img/op/logo_7.png" alt=""></div>
228
        <div class="p-op__logo-item"><img src="./assets/img/op/logo_8.png" alt=""></div>
229
        <div class="p-op__logo-item"><img src="./assets/img/op/logo_9.png" alt=""></div>
230
        <div class="p-op__logo-item"><img src="./assets/img/op/logo_11.png" alt=""></div>
231
      </div>
232
    </div>
233
  </div>
234
</div>
235

236
<div class="controls">
237
  <button class="btn-replay" onclick="playAnimation()">↻ 重新播放动画</button>
238
</div>
239

240
<script>
241
  function playAnimation() {
242
    document.body.classList.remove('is-op', 'is-load');
243
    void document.body.offsetWidth;
244
    setTimeout(() => {
245
      document.body.classList.add('is-op');
246
    }, 600);
247
  }
248

249
  window.addEventListener('DOMContentLoaded', () => {
250
    playAnimation();
251
  });
252
</script>
253
</body>
254
</html>

展开收起

周边效果交互预览: 3D光栅卡与透光藏图卡

Thu, 23 Jul 2026 00:00:00 GMT

周边效果交互预览#

详情见上一个文章：一些周边定制以及价格等

3D 光栅卡效果模拟

手动模拟倾斜 (左右滑动) 50%

物理光影效果模拟

小光圈整体背光

一些周边定制以及价格等

Wed, 22 Jul 2026 00:00:00 GMT

周边设计与定制规划#

1. 牛皮信封定制 + 封口贴定制#

牛皮纸信封: 可以放小卡,透卡.此外也可以定制封面.

牛皮纸的印刷颜色不知道怎么样,感觉可能需要尽量简单,复杂的颜色不知道能不能印出来. 定制的时候可以在翻开信封的内侧印一个小的qq二维码,这样不至于破坏外面的.如果印外面很难看,外面尽量定制别的吧

封口贴: 可以写上自己的二维码,以及扩列信息等等

拼多多 | 眉茜盈旭专卖店
- 定制门槛: 双胶纸 200 个起订、黄牛皮 500 个起订、铜版纸覆膜 500 个起订

2. 牛皮礼品纸袋#

这个跟上面的应该是同一种类型的

基本都是100起订,但是我没找到这种的,都是带小提手的

3. 单片湿巾 / 手帕纸定制包装#

单片湿巾: 挺适合夏天在漫展上赠送出去的,也挺有用

设计细节：八奈见杏菜 q版点赞，右下角小字欢迎扩列 + QQ号。

隐藏门槛：部分商家虽然标注“100 包起订”，但同时限制了“总数 500 片起订”，下单前需与客服二次核实。

起订量规律：主流定制以 1000 片/包 起订为主；

价格走势：数量越多单价越低。1000 片均价约为 0.20~0.23 元/片；达到 1 万片时，均价可降至 0.11~0.12 元/片。

低门槛 / 小批量商家#

拼多多 | 初欣家居生活官方旗舰
- 门槛与报价：50 包起订（29.9 元）
- 做图要求：需自备图（10×6 cm，分辨率 300，不能用黑色背景）
- 规则流程：一款图至少做 50 包；一张图默认双面同图，做双面异图价格相同。不可自行下单，需发图制作效果图，定稿后邀请下单。
1688 | 诸暨市万道包装有限公司 / 苍南简禾纸业有限公司
- 门槛与报价：500 片起订（150 元） (注：询价时两家跳转/展示页面有重复)
1688 | 义乌简禾纸业有限公司
- 门槛与报价：500 片起订 / 100 包起订 (需同时满足 100 包且总数满 500 片)

1,000 片起订 / 主流商家报价#

均包含免费设计、开票或包邮等服务（具体见备注）。

拼多多 | 佩姬儿生活馆
- 1,000 片报价：205 元（全网最低价 205 元/千片）
- 其他选项：荷包纸巾（白牛皮 3 层 6 片），1,000 包 / 255 元
拼多多 | 温州清迈纸制品厂
- 1,000 片报价：205 元
- 阶梯报价：2,000 片 / 410 元 | 5,000 片 / 700 元 | 10,000 片 / 1,150 元
- 规格参数：湿巾 16×18 cm；双层加厚包装膜（6.5×13.5 cm，55g）；含免费设计、开票、包邮
淘宝 | 欣然餐饮包装
- 1,000 片报价：205 元（单片湿巾定制）
拼多多 | 映鹤旗舰店 / 赞婴美官方旗舰店
- 1,000 片报价：210 元
- 阶梯报价：5,000 片 / 750 元 | 10,000 片 / 1,200 元（55g/㎡无纺布，越做越便宜）
淘宝 | 一次性湿巾定制厂家
- 1,000 片报价：228 元
- 阶梯报价：2,000 片 / 426 元 | 10,000 片 / 1,100 元 | 20,000 片 / 2,000 元（已含 1 色版费）
1688 | 温州广森纸业有限公司
- 1,000 片报价：300 元
- 规格参数：单片普通湿巾（无酒精，14×18 cm，40g 无纺布）；袋子 14×6.5 cm（含印刷）；10 天左右发货，非偏远包邮，不含发票

多规格 / 特殊定制#

拼多多 | 温州纸制品工厂
- 单片湿巾：1,000 片 / 205 元
- 多片装湿巾：5 片装（14×18 cm，40g 湿巾，透明撕标）1,000 包 / 800 元
- 其他定制：支持方形湿巾、6×8 湿巾、湿毛巾等特殊规格

大批量 / 高门槛商家#

1688 | 郑州尚美纸业 / 河南尚尔美纸业有限公司
- 门槛：外包装定制 1 万包起订
1688 | 佛山市怡莹卫生用品有限公司（客服沟通记录）
- 门槛：外包装定制 3 万包起订；湿巾图案/布面定制 10 万~20 万片起订

4. 小卡定制#

设计细节：cos的真棒奖状 + 背面 QQ 二维码。

5. 小锦旗 / 小奖状#

6. 撕拉卡#

7. 亚克力抽拉变色票根#

参考链接：1688 货源链接

8. 透卡 (PVC 透卡 / 亚克力透卡)#

定制细节：可选是否穿孔（穿孔后可挂钥匙扣）。透卡还可额外定制一块带联系方式的可穿孔小卡，方便扩列，叠挂在一起放入牛皮纸信封中。封面图片建议选择八奈见杏菜。

1688 | 苍南县亚熙亚克力制品厂：亚克力透卡，30 个起订
1688 | 深圳市西家印刷有限公司：PET 透卡 45 丝（85×54 mm 银行卡大小，模切，单面印四色加白）
- 100 张 / 80 元 | 200 张 / 110 元 | 500 张 / 190 元 | 1,000 张 / 320 元
1688 | 苍南县韵尚工艺品厂 (温州韵尚工艺品有限公司)：尺寸 8.8×6.3 cm，100 张 / 30 元（约 0.3 元/张）

9. 光栅卡#

1688 商家：
- 龙港市童谣纸塑工艺品厂：身份证大小，二变，100 张 / 150 元
- 龙港市麟禾工艺品厂：5.4×8.6 cm，三变，100 张 / 150 元
- 龙港市优立纸塑包装厂：5.4×8.6 cm，三变，100 张 / 90 元
- 广东一物一码：身份证大小（竖向），三变，100 张 / 180 元
- 大奎印刷设计 (廊坊市大奎印刷设计有限公司)：5.4×8.6 cm，三变（75线 45丝数码样，双面打印，背面 259g 白卡），100 张大货 500 元（单面打样 350 元）
- 联喜纸塑制品：5.4×8.6 cm，三变，100 张 / 150 元
- 温州史代动漫科技有限公司：身份证大小（竖向），三变，100 张 / 130 元
淘宝商家：
- 恒绘旗舰店：5.4×8.6 cm（竖向），三变，100 张 / 100 元（单价 1 元/张）
- 棱维3D：5.4×8.6 cm（竖向），同款三变单面，100 张 / 96 元（包邮）
- 美卡光栅定制：5.4×8.6 cm（竖向），三变，100 张 / 60 元
- 遇言定制：5.4×8.6 cm（竖向），三变，100 张 / 220 元
- 我要定制工艺：5.4×8.6 cm（竖向），PP 材质 2变（背面白墨，带保护膜，免费模切）；PET 材质三变（更亮、防重影） 100 张 / 90 元

10. 透光藏图卡#

参考链接：1688 货源链接

1688 | 广东省广森数码印刷股份有限公司
- 规格尺寸：透光明信片（透字款），148×100 mm（四周加 3mm 出血）
- 单价报价：¥0.68 / 个 (注：客服限制 50 个或 60 个起订，无法定制 55 个等散数)
- 制作要求：需提供 1 张 JPG 底图 + 1 张透明底黑色字体 PNG 透图
- 定制流程：点击立即定制 -> 传入底图调整位置 -> 上传透图调整大小 -> 保存
- 效果建议：背景若为纯色，透光显现效果更明显

11. Q版幽灵小遐蝶#

参考链接：

优质商家：
- 1688 | 东阳市艺术潮玩有限公司 / 东阳市祥彩打印服务部：2.35 元 / 个（尺寸 6×4.5 cm）
- 1688 | 金华市诺思锐工贸有限公司：2.0 ~ 2.35 元 / 个（小遐蝶 4.8 cm）
劣质商家：
- 1688 | 义乌市佬巴玩具有限公司：2.5 元 / 个（尺寸 9×5×5 cm）