入场与退场 · 出现和消失
开场加载序列Preloader sequence
- 数着等
- 有始有终
- 幕布揭开
打开先看到一层盖满屏的底色,中间一个数字从 0 数到 100,下面一条线跟着填满;数到 100 时几块幕布错峰往上一掀,首页才露出来。数字和线走的是同一个进度,不会出现「数字到了 100 但线还差一截」。
什么时候用它
首屏有重内容(大图、3D、视频)的站用它;本来秒开的应用加这一层只会让人觉得更慢 —— 加载本来就应该快到不需要解释。
参数
counter 0→100 · number and bar share one progress · 3–6 curtains · each 620ms cubic-bezier(.76,0,.24,1) · 80ms stagger
配方
每一项 620ms cubic-bezier(.76,0,.24,1)开场加载序列 → counter 0 → 100 @ 620ms cubic-bezier(.76,0,.24,1)
给 AI 的一句话
做一个开场加载序列:全屏底色,中间数字从 0 数到 100,下面一条进度线和数字共用同一个 0→1 进度值;到 100 之后等一小拍,再让 3 到 6 块幕布错峰 80ms、各自 620ms cubic-bezier(.76,0,.24,1) 往上掀开,露出版面。幕布走完再放主内容入场。