直接用::after伪元素+transform+transition实现滑动遮罩更可控，因opacity仅淡入淡出无方向感，background-color过渡易偏色；滑动本质是位移，须用translateY()等transform属性驱动，且transition必须写在常态规则中，避免触发重排。
直接用 ::after 伪元素 + transform + transition 实现滑动遮罩，比用 opacity 或 filter 更可控、更符合“滑入”语义。关键不是“怎么动”，而是“从哪动、动多少、是否触发重排”。
为什么不能只靠 opacity 或 background-color 过渡
opacity 只能淡入淡出，没有方向感；background-color 过渡在深色/浅色间切换时容易发灰或偏色。滑动效果本质是位移，必须靠 transform: translateY()、translateX() 或 scaleY() 驱动。
- 伪元素初始设
transform: translateY(100%)（完全在图片下方），hover 时设transform: translateY(0) - 必须把
transition写在常态规则里（如.img-wrap::after），而不是只写在:hover中，否则首次 hover 可能无动画 - 避免用
top/bottom做过渡——会触发 layout，性能差；transform是合成层操作，GPU 加速
滑动方向怎么选：上滑 / 下滑 / 侧滑
方向取决于遮罩内容和视觉预期。下滑遮罩（从顶部滑入）适合配标题文字；上滑（从底部滑入）更自然，因为用户视线常落在图下区域；侧滑多用于卡片式布局。
- 下滑：
transform: translateY(-100%) → translateY(0)，伪元素top: 0 - 上滑：
transform: translateY(100%) → translateY(0)，伪元素bottom: 0 - 左滑：
transform: translateX(-100%) → translateX(0)，配合left: 0 - 所有方向都需设
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1)，比ease-in-out更顺滑
遮罩内容放不进伪元素怎么办
伪元素不支持子节点，所以带文字、按钮的遮罩必须用真实 DOM 元素（如 <div class="overlay">）。此时容器结构要调整，且必须显式控制 z-index。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 容器仍需
position: relative，遮罩层设position: absolute+z-index: 1 - 图片本身加
z-index: 0（仅当父容器是定位元素时才生效） - 遮罩层内文字需设
pointer-events: auto（伪元素默认none，但真实元素默认可交互） - 若用 JS 控制显示/隐藏，别直接改
display—— 会中断 transition；改opacity和transform更安全
移动端 hover 失效？得补 touch 逻辑
纯 CSS 的 :hover 在 iOS Safari 和部分安卓浏览器中，首次点击才触发，第二次才真正 hover，体验断裂。这不是 bug，是规范行为。
- 方案一：加
@media (hover: hover) and (pointer: fine)媒体查询，只对鼠标设备启用 hover 动画 - 方案二：用
:focus-within模拟（给容器加tabindex="0"），键盘和触摸都能触发 - 方案三：JS 监听
touchstart并临时加 class，但要注意避免重复绑定和内存泄漏 - 别依赖
ontouchstart全局判断——现代 Chrome 已废弃该属性，检测应基于'ontouchstart' in window或matchMedia
最易被忽略的是：滑动距离必须和容器高度/宽度严格匹配。比如图片高 300px，遮罩却设 transform: translateY(100%)，那它实际滑动 300px；但如果容器有 padding 或 border，这个 100% 就不准了——老老实实用 px 或 rem 显式写死更稳。
