入场与退场 · 出现和消失
图片模糊聚拢Blur-up image load
- 先给主色调
- 往里收
- 不露白
图片先是一团糊掉的色块、还略微放大着，然后一边变清晰一边往回收 —— 从「一眼看出主色调」过渡到「看得清细节」，收的时候是往里的，所以边缘不会露白。
什么时候用它
大图、商品图、文章封面用它；小图标和本来就秒开的本地图不要用 —— 多余的 700ms 只会让人觉得慢。
参数
filter: blur(18px) → blur(0) · transform: scale 1.08 → 1 · 700ms cubic-bezier(.22,1,.36,1) · placeholder fades out in step
配方
图片模糊聚拢 → filter blur(18px) → blur(0) @ 700ms cubic-bezier(.22,1,.36,1)图片模糊聚拢 → scale 1.08 → 1 @ 700ms
给 AI 的一句话
让这张图加载时先糊后清：先用一张同色调的小图当底，真图解码完之后把 filter 从 blur(18px) 收到 0、scale 从 1.08 收到 1，700ms cubic-bezier(.22,1,.36,1)，同时让占位层淡出。放大要往里收，别让边缘露白。