WebKit 图像擦除

这不是“规范”，但 WebKit 浏览器支持 **图像蒙版**。 如果你熟悉 Photoshop，它们的工作方式与之类似。 你声明一个图像用作蒙版。 该图像的黑色部分隐藏它覆盖的内容，白色部分显示其下方的内容，灰色部分部分透明。 因此，如果您有这张图像

<img src="orig.jpg" alt="trees" class="circle-mask">

并且你创建了这张图片作为蒙版

你将在 CSS 中将其应用于该图像，如

.circle-mask {
  -webkit-mask-box-image: url(mask.png);
}

结果将是

你不需要实际的图像

我们将要利用的第一个技巧是，我们为 -webkit-mask-box-image 声明的图像不需要是实际的图形图像。 相反，我们可以使用 –webkit-gradient 来创建该图像。 是的，我们也可以制作一张渐变图像，但以编程方式创建渐变蒙版意味着更容易动态调整，并且只需要少一次 HTTP 请求。

-webkit-mask-position: 0 0;
-webkit-mask-size: 200px 200px;
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, 
   color-stop(0.00,  rgba(0,0,0,1)),
   color-stop(0.45,  rgba(0,0,0,1)),
   color-stop(0.50,  rgba(0,0,0,0)),
   color-stop(0.55,  rgba(0,0,0,0)),
   color-stop(1.00,  rgba(0,0,0,0)));

在上面的 CSS 中，我们创建了一个 200px x 200px 的图像，该图像从左上角完全不透明开始，以 45 度角渐变，大约在中点位置渐变为完全透明。 它看起来有点像这样

移动蒙版

请注意，我们使用 –webkit-mask-position 设置了蒙版的 position。 由于我们可以设置位置，因此我们可以移动位置。 我们可以在 :hover 上移动它 –

.circle-mask {
	-webkit-mask-position: 0 0;
}
.circle-mask:hover {
	-webkit-mask-position: -300px -300px;
}

或者我们可以使用 -webkit-animation 来自动移动该蒙版。

@-webkit-keyframes wipe {
	0% {
		-webkit-mask-position: 0 0;
	}
	100% {
		-webkit-mask-position: -300px -300px;
	}
}
.circle-mask {
	-webkit-animation: wipe 6s infinite;
	-webkit-animation-delay: 3s;
	-webkit-animation-direction: alternate;
}

创建擦除

我相信所有聪明人都已经把这一切联系起来了。 想法是，我们有一个图像在另一个图像之上。 顶部的图像获取蒙版，然后我们根据需要移动蒙版。

<div id="banner">
	<div><img src="images/banner-1.jpg" alt="Skyline 1"></div>
	<div><img src="images/banner-2.jpg" alt="Skyline 2"></div>
</div>

#banner {
	width: 800px;        /* Size of images, will collapse without */
	height: 300px;
	position: relative;  /* For abs. positioning inside */
	border: 8px solid #eee;
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}

#banner div {
	position: absolute; /* Top and left zero are implied */
}

/* Second one is on top */
#banner div:nth-child(2) {
	-webkit-animation: wipe 6s infinite;
	-webkit-animation-delay: 3s;
	-webkit-animation-direction: alternate;
	-webkit-mask-size: 2000px 2000px;
	-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, 
			color-stop(0.00,  rgba(0,0,0,1)),
			color-stop(0.45,  rgba(0,0,0,1)),
			color-stop(0.50,  rgba(0,0,0,0)),
			color-stop(0.55,  rgba(0,0,0,0)),
			color-stop(1.00,  rgba(0,0,0,0)));
}

演示和下载

在下载文件中，还有一个示例，其中擦除水平而不是倾斜，并且在悬停事件上使用 -webkit-transition 而不是动画。

查看演示   下载文件

不止两个？

我比我应该花的时间更多的时间试图看看是否可以使动画依次擦除三个图像。 这有点可能，但我无法像我希望的那样使其平滑且一致，因此我放弃了。 我仍然相当确定这是可能的，可能是使用两个具有不同延迟的不同动画等等。 如果你尝试并使其成功，请展示一下！

更多

查看 公告，了解有关蒙版本身的更多信息。 其中有一些有用的信息，例如蒙版图像可以拉伸（就像 全页背景）和重复。 它实际上非常类似于 border-image，具有用于拉伸/重复的九宫格系统。

致谢

我从 Doug Neiner 那里借鉴了这个想法，他向我展示了这个想法的简单演示。 经许可发布。