纯CSS可实现百叶窗开屏，需将屏幕纵向分割为8–12个独立条带，每条设transform-origin:top/bottom、scaleY(0)→scaleY(1)，配合非等差delay（如0s/0.08s/0.14s/0.18s）与cubic-bezier(0.2,0.8,0.3,1)时序，且条带须置于body顶层、加will-change:transform并加载后移除。
用 scaleY + stagger 实现百叶窗开屏，关键在 transform-origin 和延迟节奏
直接说结论：纯 CSS 能做，但必须控制每个条带的 transform-origin 为顶部或底部，并配合 scaleY(0) → scaleY(1) 动画，再用 animation-delay 错开时间。浏览器原生不支持“stagger”语法，得手动写或靠 JS 生成。
为什么单个 div 的 scaleY 不行，必须拆成多个条带
百叶窗效果本质是「分段垂直展开」，如果只用一个容器做 scaleY，那是整体拉伸，不是百叶窗。必须把屏幕纵向切成 N 个 div 条带（比如 8–12 条），每条独立动画。
- 条带高度建议设为
height: calc(100vh / 8)，避免小数像素导致缝隙 - 每个条带需固定
transform-origin: top（从上往下展开）或bottom（从下往上），否则缩放中心偏移，会滑动或留白 - 初始状态统一设
transform: scaleY(0)，且transform-origin必须和动画方向匹配，否则第一帧就错位
CSS 动画参数怎么配才自然：timing-function 和 delay 的取值逻辑
人眼对前慢后快的展开更敏感，所以不用 ease，推荐 cubic-bezier(0.2, 0.8, 0.3, 1)（类似 ease-out 但起始更缓）。delay 不要等差递增——中间条带视觉延迟应略短，两端略长，模拟真实百叶窗机械惯性。
- 8 条带时，delay 可设为：
0s、0.08s、0.14s、0.18s、0.18s、0.14s、0.08s、0s - 动画时长统一用
0.6s，太短像闪，太长拖沓 - 务必加
will-change: transform到每个条带，避免 Safari 下 scaleY 动画掉帧
容易被忽略的兼容性和 DOM 结构陷阱
这个效果在 iOS Safari 15.4+ 和 Chrome 100+ 没问题，但 Android UC 浏览器仍可能跳帧；另外，如果页面有 fixed 定位元素（如导航栏），条带需用 position: fixed 全屏覆盖，否则滚动时会露底。
立即学习“前端免费学习笔记（深入）”；
- DOM 必须放在
<body>最外层，不能嵌套在<main>或布局容器里，否则100vh计算失准 - 别用
opacity配合scaleY—— opacity 动画会触发重绘，和 transform 硬件加速冲突，导致卡顿 - 加载完成后必须用 JS 移除这些条带（
el.remove()），否则它们仍占据 DOM，影响后续交互焦点
真正难的不是写出来，是让第 3 条和第 6 条的展开节奏肉眼不可分辨差异，又不能靠堆 delay 数值硬调——得测真机，看慢动作回放。
