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

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

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

动画效果演示#

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

核心实现技术拆解#

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

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

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

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）：

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 步频：

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 源代码

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>

音乐

音乐