大家有看过星球大战这部电影吗，里面有许多场景间的过渡效果看起来非常的丝滑，那我们能不能使用CSS来模拟实现一下呢？
渐变体验如果mask-image以图像或渐变的形式出现，则我们可以控制与元素的哪些像素是可见的，哪些像素是不可见的（透明）。当mask-image应用于元素时，它充当一种映射，确定每个元素的可见性。
(资料图片仅供参考)
下面尝试将两张图片使用mask-image实现交叉淡入淡出效果
效果是这样的：
这里第一眼看上去你不会以为这就是一张图片吧，其实这是由星球背景 + 人物两张图片“合成”的。
是不是有点PS的感觉了。
「原理是：第一个场景是星球，第二个场景是人物，直接位于第一个场景之上。在第二个场景中使用渐变蒙版使其左侧透明，从而显示出第一个场景。」
-webkit-mask-image为linear-gradient()从左到右渐变。
前三分之一是完全透明的，所以这部分人物图片是不可见的，底下的星球图片露出。中间的三分之一从透明变为不透明的白色，场景逐渐淡入。最后三分之一是完全不透明的白色，导致这部分人物图片完全可见，底下的星球完全被盖住。水平擦除过渡了解了上面这个效果的实现原理，我们就可以来着手实现第二个水平擦除效果了，从上面这个例子我们不难想象到只要蒙版拉伸到比实际场景更宽，然后动画水平滑动，就能够实现这个水平擦除效果了。
.xq_outer { position: relative; width: 600px; height: 360px; margin: 20px auto;}.xq_bg { position: absolute; width: 100%; height: 100%; background-image: url("/public/xq_bg.jpeg"); background-size: 100% 100%;}.xq_women { position: absolute; width: 100%; height: 100%; background-image: url("/public/xq_women.jpeg"); background-size: 100% 100%; // -webkit-mask-image: linear-gradient(to right, transparent 30%, #fff 44%); -webkit-mask-image: linear-gradient(to right, transparent 48%, #fff 52%); -webkit-mask-size: 210%; -webkit-mask-position: left;}.xq_outer:is(:hover) .xq_women { -webkit-mask-position: right; transition: -webkit-mask-position 2s linear;}效果如下：
「原理：蒙版的大小为-webkit-mask-size: 210%- 这为场景提供了 100% 的宽度，最初是完全透明的 + 10% 的淡入淡出 + 另一个 100% 的场景最终完全不透明。」
光圈擦除过渡下面再来看一种光圈擦除效果，这里将会使用到@property自定义属性，由于这个属性还处于实验阶段，所以在将其用于生产之前，请仔细检查浏览器兼容性表格。
大致的思路是：使用radial-gradient()在其中定义一个自定义属性。然后我们可以对该自定义属性进行动画处理以对渐变进行动画处理。但在此之前，我们需要将自定义属性注册到@property.
@property --r { syntax: ""; inherits: true; initial-value: -5%;}.xq_women { position: absolute; width: 100%; height: 100%; background-image: url("/public/xq_women.jpeg"); background-size: 100% 100%; // -webkit-mask-image: linear-gradient(to right, transparent 30%, #fff 44%); // -webkit-mask-image: linear-gradient(to right, transparent 48%, #fff 52%); // -webkit-mask-size: 210%; // -webkit-mask-position: left; -webkit-mask-image: radial-gradient( circle, #fff calc(var(--r) - 5%), transparent calc(var(--r) + 5%) );}@keyframes circle { to { --r: 105%; }}.xq_outer:is(:hover) .xq_women { // -webkit-mask-position: right; // transition: -webkit-mask-position 2s linear; animation: circle 2s linear forwards;} 再来看看此时的效果：
「原理：随着 --radius 的动画化，radial-gradient() 中的色标位置也是如此。它们被计算为 --radius 值的 -5% 和 +5%，以创建渐变淡入淡出，为擦拭提供柔和的边缘。」
时钟擦除过渡再来看一个星球大战中最具标志性的擦除过渡——时钟擦除过渡。这次我们使用conic-gradient()和动画化一个自定义属性angle值。
@property --angle { syntax: ""; inherits: true; initial-value: -10deg;}.xq_women { position: absolute; width: 100%; height: 100%; background-image: url("/public/xq_women.jpeg"); background-size: 100% 100%; -webkit-mask-image: conic-gradient( #fff 0deg, #fff calc(var(--angle) - 10deg), transparent calc(var(--angle) + 10deg), transparent 360deg ), conic-gradient(transparent 350deg, #fff 360deg); z-index: -1;}@keyframes ang { to { --angle: 370deg; }}.xq_outer:is(:hover) .xq_women { animation: ang 2s linear forwards; z-index: 1;} 效果如下：
「原理：第一个conic-gradient()动画以创建时钟擦除效果，但它在其起点（在 处0deg）留下了硬边。这就是为什么要conic-gradient()在硬边缘之前创建一个小的淡入淡出并将其软化的原因。渐变结合在一起为场景创建蒙版。」
总结现在的CSS功能越来越强大了，在本文中介绍了很多 CSS 成分，包括不同类型的渐变、注册自定义属性，当然还有遮罩和动画。这在以前，仅仅靠CSS是不可能实现的效果！