如何利用CSS定位和mask属性实现独特的转场效果？-css教程-PHP中文网

首选mask-position而非mask-size，因其动画更稳定、支持硬件加速、数值映射直观、兼容性更好；配合linear-gradient可实现高效可控的转场擦除效果。

如何利用css定位和mask属性实现独特的转场效果？

直接说结论：用 mask-position 配合 linear-gradient 做位移动画，是最可控、兼容性相对好、且无需额外图片资源的转场遮罩实现方式。

为什么首选 `mask-position` 而不是 `mask-size`？

因为 mask-position 动画更稳定，浏览器能硬件加速（尤其在 Chrome / Safari），而 mask-size 在部分旧版 Safari 中会触发重绘而非合成，导致卡顿；mask-position 的数值变化也更容易映射到擦除方向（比如从左到右 = 0% 50% → 100% 50%），逻辑直觉强。

使用 mask-size 实现“放大揭示”时，若起始值太小（如 0% 0%），可能因浮点精度丢失导致首帧不可见
mask-position 支持百分比和像素值混用（如 10px 50%），方便对齐容器边界或响应式微调
当遮罩是 linear-gradient(to right, transparent 0%, #000 50%, transparent 100%) 时，移动 mask-position 就等于“拖动这把渐变尺子”，擦除节奏完全可预测

`mask-image` 用渐变还是 SVG？

优先用 linear-gradient 或 radial-gradient，除非你要做不规则路径擦除。渐变声明即内联、无 HTTP 请求、可直接 CSS 变量控制颜色/角度/断点——比如想改擦除方向，只需改 to bottom 而不是换一张图。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

linear-gradient(to right, transparent, #000)：适合左右/上下线性擦除
radial-gradient(circle at center, #000 0%, transparent 70%)：适合中心扩散揭示，注意透明区必须是 transparent，不能用 rgba(0,0,0,0)（后者在部分 Safari 中不被识别为透明通道）
SVG 仅在需要贝塞尔曲线、多边形或路径动画时引入；但要注意 mask 引用 SVG 时，必须确保 SVG 内部 <path></path> 的 fill 是纯黑（#000）或透明，且 viewBox 设置正确，否则遮罩区域错位

常见翻车点：`mask` 不生效或反向显示

90% 的问题出在遮罩图的“黑白定义逻辑”被误解：CSS mask 中，**黑色 = 完全可见，透明 = 完全隐藏**（和 Photoshop 的图层蒙版相反，但和 SVG <mask></mask> 一致）。所以用渐变时，千万别写成 linear-gradient(to right, #000, transparent) 还期待从黑到透是“擦除”，实际效果是“从显示到隐藏”——正好反了。

正确做法：把你想“擦出来”的区域设为黑色，其余设为透明。例如从左擦到右，应写 linear-gradient(to right, transparent 0%, #000 0%, #000 100%)，再配合 mask-position: -100% 0 → 0 0
Firefox 目前仍只支持 -webkit-mask 前缀写法，必须同时写两套：mask: linear-gradient(...); -webkit-mask: linear-gradient(...);
如果元素背景是 background: none 或透明色，遮罩可能“看不见效果”，先给个临时 background: #eee 确认遮罩是否在动

性能与可访问性容易被忽略的细节

动画本身不卡，不代表整页流畅。遮罩层若叠加在大图或视频上，未开启 will-change 或 transform 硬件加速，滚动时容易掉帧；另外，屏幕阅读器完全感知不到 mask 的存在，它只影响视觉渲染，不改变 DOM 结构或语义。

加 transform: translateZ(0) 或 will-change: mask-position 到动画元素，强制启用合成层（但别滥用，每个都加会增加内存压力）
避免在 :hover 或 @media (prefers-reduced-motion) 下仍触发遮罩动画，应主动监听并降级为 opacity 淡入
如果转场用于关键内容切换（比如步骤引导），需额外提供非动画 fallback，例如用 aria-live 同步状态变更