--- title: "落款盖章开场" summary: "首访全屏开场：「卓琪」按真实笔顺一笔一笔写出来，石章压下、抬走留下湿印，印痕飞回顶栏 Logo，页面从 Logo 处洇开。" category: "motion (动画效果)" origin: "original" stack: ["html","css","js","svg"] tags: ["开场动画","笔顺书写","印章","遮罩揭幕","Web Animations"] demo: "https://zhuoqidev.com/design/demos/stamp-opening/" url: "https://zhuoqidev.com/design/stamp-opening/" license: "MIT" added: "2026-10-24" translation: "https://zhuoqidev.com/en/design/stamp-opening/index.md" --- # 落款盖章开场 > 首访全屏开场：「卓琪」按真实笔顺一笔一笔写出来，石章压下、抬走留下湿印，印痕飞回顶栏 Logo，页面从 Logo 处洇开。 本站首页第一次打开时的开场（宽屏、第一次来才播，约 4.4 秒）。开场全部用站点自己的东西：名字、印章 Logo、印章红，最后落在真正的 Logo 上再揭开页面，不是一块和页面无关的遮罩。 ## 看点 - **按真实笔顺书写**：每个字的每一笔都有一条轮廓和一条中线（数据来自 Make Me a Hanzi）。把轮廓做成 `clipPath`，沿中线画一条 200 单位粗的线，再用 `stroke-dashoffset` 把线一点点画出来，看起来就是笔顺着笔画走。两个字共 20 笔、1.55 秒，按每笔的长度分配时间，笔与笔之间停 22 毫秒，两个字之间多停 120 毫秒。 - **墨迹有毛边**：整组笔画套一层 `feTurbulence` + `feDisplacementMap` 滤镜，边缘洇开 3px，不再是矢量的光滑边。 - **一方石章，不是一个红方块**：先看到的是从上往下看的章身（米色石面、顶上一个小钮、底边一圈蘸了印泥的红），带着由虚到实的投影落下来，中途还往上提一下蓄力，再压下去。 - **落下那一下**：纸面整体下沉 3px 再弹回、印章周围一圈压痕扩散、七个印泥点溅开，同时出现红色印痕。 - **湿印会干**：章抬走后印痕上有一层 `soft-light` 的斜向反光，一秒内淡掉；印痕本身用噪声做了缺墨和毛边。 - **印痕飞回 Logo 再揭幕**：印痕沿一道上拱的弧线飞到顶栏 Logo 上（量 Logo 的真实位置，落点误差 2px 内），落定后页面才从 Logo 处打开：遮罩用 `mask: radial-gradient()`，洞的边缘羽化 70px，再加一圈印泥红的涟漪跟着边走。 - **镜头慢慢推近**：整段开场里，画面以 3.5% 的幅度缓慢放大；印痕起飞前停住，否则落点会算偏。 ## 怎么用 1. 用到的字体（龙藏体、Caveat、思源宋体 900）和笔顺数据都从 jsDelivr 按固定版本加载，demo 里只有自己的代码；笔顺数据是 [hanzi-writer-data](https://github.com/chanind/hanzi-writer-data)（Arphic Public License），自己的站里内联它时要带上 `ARPHICPL.TXT`。换成别的字，把 `["卓", "琪"]` 换掉即可。 2. 时间线全部用 Web Animations（`el.animate()`）排，在脚本开头的注释里写着每一步从第几毫秒开始。勾上「慢放 ¼×」可以一步一步看；网址加 `?t=2800` 会停在那个时刻（3100 毫秒以内）。 3. 放进真站时：在 `` 的内联脚本里判断要不要播（第一次来、宽屏、没开「减少动效」）并给 `` 加类，遮罩默认 `display: none`，这样不跑 JS 的人和爬虫直接看到页面；动画脚本和笔顺数据用 `import()` 只在要播时加载。 4. 任意点击、按键、滚轮、触摸都立刻跳过。 ## 坑 - **后排的动画要用 `fill: forwards`**：同一个元素先有一段动画、后面再加一段时，后一段如果用 `fill: both`，它「还没开始」时的状态会盖住前一段，前一段等于没播。 - **落点用独立的 `translate` / `scale` 属性**：印痕本身 `rotate: -4deg`，如果把平移写进 `transform`，平移会沿着旋转后的方向走，飞 700px 能偏出 50px。 - **羽化的洞要从负半径开始**：`transparent var(--hole), #000 calc(var(--hole) + 70px)` 在半径 0 时，Logo 周围 70px 已经半透明，一开场就把底下的页面透出来了；`--hole` 要从 `-70px` 起。 - **拆字前先藏起来**：「的开发笔记」要拆成单字才能逐字浮现，拆之前那一刻整行会闪一下；父元素先 `visibility: hidden`，拆出来的字再 `visibility: visible`。 - 字符串拆字用 `Array.from(str)`，不要 `[...str]`（站里的 ESLint 规则会报）；拆之前先 `trim()`，否则模板里的换行和缩进也会被拆成「字」。 ## 参考实现（完整源码） 在线演示：https://zhuoqidev.com/design/demos/stamp-opening/。单文件，存成 .html 就能打开。 ### index.html ```html 落款盖章开场
卓琪的开发笔记 zhuoqidev.com

把 Agent 做进真实产品

notes from shipping agents to production

最新 · 10-24

买中转 API 之前先验货

选型 · 10-18

Mac 到底适不适合跑大模型

工程实践 · 05-16

为什么我们从 Celery 迁移到 Temporal

```