用 opacity: 0 和 transition: opacity 0.3s 实现文字淡入，transition 必须写在默认状态；避免负边距、确保定位锚点；触屏设备需 js 或媒体查询替代 :hover；动画卡顿时加 will-change: opacity 或 font-display: swap。
transition 配合 opacity 实现遮罩文字显示
鼠标移入容器时让文字淡入，本质是控制 opacity 从 0 到 1 的过渡。关键不是“加遮罩”，而是让文字默认不可见、移入后才可见——用 opacity: 0 + transition: opacity 0.3s 就够了，不需要额外元素或伪类模拟遮罩层。
- 必须给目标文字设置
opacity: 0（不能只靠visibility: hidden或display: none，后者会中断 transition） -
transition要写在默认状态上，不是 hover 状态里；否则第一次移入没动画 - 如果父容器有
overflow: hidden，且文字宽高超出容器，需确保移入时不会被裁切——可加transform: translateZ(0)强制硬件加速，避免渲染异常
hover 触发时文字位置错乱或跳动
常见于文字默认无宽高（比如只写了 position: absolute 却没设 top/left），或用了 transform: translateY() 但未预留空间。文字突然出现会撑开布局，或因定位基准偏移导致“闪一下”。
- 优先用
position: absolute把文字固定在容器右下角等位置，配合left: 0、bottom: 0明确锚点 - 避免用
margin-top: -20px这类负边距隐藏文字——它仍占文档流，移入后 margin 消失会导致父容器重排 - 如果必须居中，用
top: 50%+transform: translateY(-50%)，而不是靠margin或line-height
移动端 touch 设备上 hover 不生效
iOS Safari 和部分安卓浏览器对 :hover 支持有限：首次点击才触发 hover，再点一次才取消，体验断断续续。这不是 bug，是浏览器为兼容老页面做的策略。
- 不要依赖纯
:hover做核心交互，尤其涉及信息揭示的场景 - 可用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，把触屏设备直接排除在外 - 更稳妥的做法是加一层 JS：监听
touchstart后给容器加 class，用.show-desc替代:hover控制opacity
transition 动画卡顿或闪烁
特别是文字多、字体加载中、或容器有复杂背景时，opacity 过渡可能掉帧。根源常是浏览器反复重绘整个图层，而非只合成 opacity 变化。
立即学习“前端免费学习笔记（深入）”；
- 给文字容器加
will-change: opacity（仅在 hover 前临时加，避免长期占用内存） - 避免同时过渡多个属性，比如
opacity和transform一起动；若必须，确保transform是translate3d(0,0,0)这类可 GPU 加速的 - 字体未加载完成时，
opacity过渡可能在文字“突然出现”的瞬间开始，看起来像闪——加font-display: swap让后备字体先顶上
最易被忽略的是：opacity 动画是否真需要？有时用户扫一眼就移开了，0.3 秒过渡反而拖慢反馈。简单场景下，直接用 visibility: hidden → visible + transition: visibility 0.1s（虽然 visibility 本身不可过渡，但可以配合 opacity 实现“视觉上瞬时显隐”）更干脆。效果和性能之间，得看实际停留时长和设备分布。
