用 clip-path 裁切信封盖子比旋转更可控，需配合 overflow: hidden、will-change、calc() 动态计算及 transition-delay 错开动画；移动端须用 JavaScript 控制 .is-open 类并增强可访问性。
信封盖子用 clip-path 动画裁切更可控
直接旋转整个信封元素容易导致内容变形或错位，真正模拟“掀开盖子”的关键在于只动上半部分。用 clip-path 对信封顶部区域做动态裁剪最稳妥，比如从 inset(0 0 50% 0)（盖子完全覆盖）过渡到 inset(100% 0 0 0)（盖子完全掀开）。注意必须给容器设 overflow: hidden，否则裁剪外的内容会漏出来。
常见错误是用 transform: rotateX() 配合 perspective，看似立体实则在移动端兼容性差，且卡片滑出时容易出现 z-index 层叠错乱。
-
clip-path在 Safari 15.4+ 和 Chrome 100+ 支持良好，旧版需加-webkit-clip-path - 裁剪路径数值要配合信封高度设计，建议用
calc()动态计算，比如inset(calc(50% - 2px) 0 0 0)避免盖子边缘留白 - 动画需加
will-change: clip-path提升渲染性能，尤其在低配设备上
卡片滑出要用 transform: translateY() 而非 top
用 top 触发 layout，帧率容易掉；transform 是合成层操作，丝滑得多。卡片初始状态设为 transform: translateY(-100%)（完全藏在信封下方），盖子掀开后立刻接 transform: translateY(0) 滑入。
别忘了给卡片加 transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) —— 这个贝塞尔曲线比默认 ease 更有“弹出”感，避免机械式匀速滑动。
立即学习“前端免费学习笔记（深入）”；
- 卡片容器需设
position: relative，否则transform可能影响布局流 - 如果卡片内有图片或字体，加
opacity: 0初始态 +transition: opacity 0.2s，避免闪现 - 不要同时对同一元素既设
transform又设left/top，浏览器会强制降级到 layout 阶段
盖子和卡片的动画时机必须用 transition-delay 错开
盖子掀开还没到位，卡片就急着滑出，视觉上会像被“顶”出来，破坏信封结构感。正确做法是让卡片动画晚于盖子约 0.15s 启动，形成自然承接。
典型写法：盖子元素设 transition: clip-path 0.5s ease-out，卡片元素设 transition: transform 0.4s ease-out 0.15s, opacity 0.2s 0.15s。这个 0.15s 延迟不是凭感觉，而是根据盖子动画完成前 20% 的时间点估算出来的。
- 延迟值不能硬编码成固定毫秒数，最好用 CSS 自定义属性统一管理，比如
--envelope-open-time: 0.5s，然后卡片用calc(var(--envelope-open-time) * 0.3) - 如果盖子动画被用户快速重复触发（比如连点），得用 JavaScript 清除上一次的
transitionend监听，否则卡片可能卡在半途 - 移动端手指松开瞬间才开始动画，所以别依赖
:hover，改用.is-open类名控制更可靠
移动端触摸反馈和可访问性容易被忽略
纯 CSS 实现无法监听触摸结束事件，所以“拆信”动作必须绑定到按钮或伪元素上，并用 JavaScript 切换 .is-open 类。否则 iOS 上点一下没反应，用户会以为功能失效。
另外，屏幕阅读器看不到视觉动画，得补一句 aria-live="polite" 在卡片容器上，卡片滑出时用 JS 动态更新 aria-label，比如 “信封已打开，欢迎卡片已显示”。
- 信封盖子区域要设
cursor: pointer和touch-action: manipulation，减少 iOS 300ms 点击延迟 - 避免用
height: 0配合overflow: hidden做隐藏，会导致无障碍树中该区域不可读 - 动画过程中若用户按住 Home 键切到后台，再切回来可能卡在中间态，需监听
visibilitychange重置状态
