用CSS遮罩实现过渡效果的示例代码

今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样,遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中,我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和位于图片之上的PNG实现一个有趣的过渡效果。steps()是一个timing function,允许我们将动画或者过渡分割成段,而不是从一种状态持续到另一种状态的过渡。这个函数有两个参数,第一个参数是一个正值,指定我们希望动画分割的段数。

注意: 该效果是高度试验性的,只被一些现代浏览器支持(Chrome、Safari、Opera)。

CSS Masks(CSS遮罩)

使用选定图像作为遮罩,用于显示元素的一部分的方法

W3C的候选推荐

支持以下版本:

Desktop

Mobile / Tablet

支持情况:

注意Firefox只是部分支持(它只支持内嵌的SVG遮罩元素),所以我们只能退一步希望所有的现代浏览器都尽快的提供支持。我们可以使用Modernizr来检查浏览器的支持情况。

创建遮罩图像

要实现遮罩过渡效果,我们需要一个图像来隐藏/显示我们底层图像的某些部分。该遮罩图像是具有透明部分的PNG图像。它自身应该是一个sprite image看起来像下面这样:

黑色部分显示当前图片,同时白色部分(透明部分)作为当前图像的遮罩,显示第二张图片。

为了创建sprite image,我们将视频导入到Adobe After Effects以减少视频的时间,移除白色部分并导出为PNG序列。为了将持续时间减为1.4秒(过渡时常),我们将使用Time strech效果。

要删除白色部分,我们将使用 extract键 设置白点到0。在下面的截图中,蓝色部分是背景是视频的透明部分。

最后,我们将其存储为PNG序列,然后使用Photoshop 或类似的图像处理软件将它生成了一个单一的图像。

我们将创建另一个“反向”sprite image,以产生相反的效果。你可以在演示文件的img文件夹中找到的所有的sprite image。
现在,我们已经创建了遮罩图像,让我们深入到这个变换示例的HTML结构中吧。

HTML

在这个例子中,创建一个简单的轮播图幻灯片来展示遮罩效果。轮播图将全屏显示,我们添加一些箭头用于触发幻灯片的过渡切换。思路是将要展示的幻灯片图像进行叠加,在每次过渡动画结束的时候,通过改变它们的z-index来切换。

下面是轮播图的HTML结构:

<div class="page-view">
	<div class="project">
		<div class="text">
			<h1>“All good things are <br> wild & free”</h1>
			<p>Photo by Andreas Rønningen</p>
		</div>
	</div>
	<div class="project">
		<div class="text">
			<h1>“Into the wild”</h1>
			<p>Photo by John Price</p>
		</div>
	</div>
	<div class="project">
		<div class="text">
			<h1>“Is spring coming?”</h1>
			<p>Photo by Thomas Lefebvre</p>
		</div>
	</div>
	<div class="project">
		<div class="text">
			<h1>“Stay curious”</h1>
			<p>Photo by Maria</p>
		</div>
	</div>
	<nav class="arrows">
		<div class="arrow previous">
			<svg viewBox="208.3 352 4.2 6.4">
				<polygon class="st0" points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"/>
			</svg>
		</div>
		<div class="arrow next">
			<svg viewBox="208.3 352 4.2 6.4">
				<polygon class="st0" points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"/>
			</svg>
		</div>
	</nav>
</div>

用CSS遮罩实现过渡效果的示例代码

扫一扫手机访问