一个属性,整页编排

官网每个模块都只是挂了一个 data-reveal —— 往下滚,看它们逐一进场。

模块 01 · 默认升入

从下方 28px 飘入

不带变体值的 data-reveal 就是这一种:opacity 0 → 1,translate 0 28px → 0,一条 900ms 的 cubic-bezier(0.22,1,0.36,1) 过渡。官网 hero 文案、各段标题全部用它。

模块 02 · 方向变体

右栏从右侧滑入

data-reveal="right" 初始位移换成 36px 0。官网"方法论"模块的右侧导语、地球模块的球体都是 right 入场,和左栏的默认升入形成对角线节奏。

36px

方向即属性值

left / right / scale / rise-lg 四个变体只改初始 translate 或 scale,过渡曲线共用一条。

模块 03 · 波浪错峰

兄弟元素 90ms 一个

零 JS 排队

delay 由 CSS nth-child 递增 --reveal-delay 给出,JS 只管翻牌。

同批进场

三张卡在同一帧被翻成 revealed,波浪感全靠 delay。

节奏令牌

官网不同区块用 70 / 80 / 90 / 110ms 四档间隔。

模块 04 · 形态变体

大块面用 rise-lg

整块舞台从 64px 下方浮起

rise-lg = translate 0 64px + scale 0.985,官网结尾 CTA 的桌面端窗口截图就是这么进场的;scale 变体则只做 0.96 → 1 的呼吸。

—— 到底了,点右下角可以重看一遍 ——