单纯改width不行，因为会导致内容横向拉伸变形；真实卷轴需遮罩位移+内容渐显，配合伪元素模拟轴心、overflow隐藏溢出、内阴影动态增强以呈现纸张厚度感。
直接用 width 从 0 增长实现卷轴展开，视觉上会“拉伸变形”，不是真卷轴效果；必须配合伪元素、遮罩和内阴影才能骗过人眼。
为什么单纯改 width 不行
纯靠 width: 0 → width: 100% 动画，内容区域会横向拉伸，文字变宽、图片失真，完全不像纸张从卷中徐徐铺开。真实卷轴是“固定宽度的纸被左右两个轴带动展开”，核心是「遮罩位移 + 内容渐显」，不是内容本身变宽。
常见错误现象：
• 文字出现横向模糊或字体粗细突变
• 卷轴两端木轴位置错乱、不同步
• 展开后边缘有白边或阴影断裂
- 伪元素
::before和::after必须用绝对定位模拟左右轴，且需独立动画 -
overflow: hidden必须加在包裹容器上，否则卷轴未展开部分会溢出 - 内阴影（
box-shadow: inset）要随展开进度增强，否则缺乏“纸张厚度感”
width 动画只适合控制遮罩层
真正该用 width 动画的，是覆盖在内容上方的「遮罩层」——比如一个半透明 .mask 元素，初始 width: 100% 盖住全部，然后 width: 0 向中间收缩，露出下方已静置的内容区。这样内容本身不参与动画，无变形风险。
使用场景：
• 小程序/PC端轻量级卷轴（无需3D透视）
• 内容高度固定、不需要响应式重排的卡片类展示
- 遮罩层推荐用
background: linear-gradient(to right, #fff, #fff 50%, transparent 50%)模拟纸张边缘渐隐 - 遮罩动画时长建议 ≥ 内容渐显动画（如
ani3），否则会提前露底 - 若内容含图片，务必设
img { display: block; }，避免底部留空白影响遮罩对齐
内阴影怎么配合展开节奏
box-shadow: inset 不能全程恒定，得随展开进度动态增强：起始时弱（inset 0 0 8px rgba(0,0,0,0.05)），结束时强（inset 0 0 24px rgba(0,0,0,0.15)）。否则卷轴像贴纸，没有纸张卷曲带来的明暗过渡。
参数差异：
• inset 方向必须是垂直方向（0 4px）或斜向（2px 2px），纯水平（4px 0）会像描边
• 模糊值（第三参数）每增加 4px，视觉厚度感提升一级，但超过 32px 易发虚
- 不要用
text-shadow替代，它只作用于文字，无法模拟纸张整体受光 - 若背景非纯白，需同步调整
rgba()的 alpha 值，避免阴影“浮”在背景上 - 动画中慎用
filter: drop-shadow()，它会触发重绘，低端安卓机易掉帧
最易被忽略的是卷轴两端轴心点的锚定——transform-origin 必须设为 center top 或 center bottom，否则旋转动画会偏移。哪怕只用平移动画，也要检查 left/right 值是否随视口缩放失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
