官网每个模块都只是挂了一个 data-reveal —— 往下滚,看它们逐一进场。
↓模块 01 · 默认升入
不带变体值的 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 入场,和左栏的默认升入形成对角线节奏。
left / right / scale / rise-lg 四个变体只改初始 translate 或 scale,过渡曲线共用一条。
模块 03 · 波浪错峰
delay 由 CSS nth-child 递增 --reveal-delay 给出,JS 只管翻牌。
三张卡在同一帧被翻成 revealed,波浪感全靠 delay。
官网不同区块用 70 / 80 / 90 / 110ms 四档间隔。
模块 04 · 形态变体
rise-lg = translate 0 64px + scale 0.985,官网结尾 CTA 的桌面端窗口截图就是这么进场的;scale 变体则只做 0.96 → 1 的呼吸。
—— 到底了,点右下角可以重看一遍 ——