• 原文地址：
• 原文作者：

今天我们想向您展示如何使用CSS Masks创建一个有趣的过渡效果。 与剪切类似，遮罩是定义可见性和与元素复合的另一种方式。 在下面的教程中，我们将向您展示如何在简单轮播图中为过渡效果应用新属性。 我们将使用steps（）计时功能动画，并在图像上移动遮罩PNG以实现有趣的过渡效果。

注意：请记住，这种效果还处于实验阶段，只有现代浏览器支持（Chrome，Safari和Opera）。

CSS Masks

使用所选图像来遮盖元素的一部分的方法

W3C候选人推荐

支持以下版本：

桌面应用

移动端应用

可以在上查看详细的支持情况

请记住，Firefox只有部分支持（它只支持内联SVG遮罩元素）所以我们会有一个回退版本。 希望CSS Masks能尽快得到所有现代浏览器的支持。 请注意，我们正在添加Modernizr以检查是否支持。

让我们一起愉快的开始吧！

创建遮罩图片

在本教程中，我们将介绍第一个示例（演示1）。

为了使遮罩过渡效果起作用，我们需要一个图像，用于隐藏/显示基础图像的某些部分。 该遮罩图像将是一个PNG，上面有透明部分。 这个PNG将是一个雪碧图，它看起来如下：

黑色部分将显示当前图像，但白色部分（实际上是透明的）将是我们图像的遮罩部分，将显示第二个图像。

为了创建雪碧图，我们将使用此。 我们将其导入Adobe After Effects以减少视频的时间，删除白色部分并将其导出为PNG序列。

要将持续时间缩短到1.4秒（我们希望转换的时间），我们将使用时间拉伸效果（）。

要删除白色部分，我们将使用Keying -> extract并将白点设置为0.在下面的屏幕截图中，蓝色部分是我们合成的背景，即视频的透明部分。

最后，我们可以将合成的视频保存为PNG序列，然后使用Photoshop或生成单个图像：

这是一个雪碧图，具有非常连贯的外观效果。 我们将为另一种效果创建另一个“反向”雪碧图。 您将在演示文件的img文件夹中找到所有不同的雪碧图。

现在，我们已经创建了遮罩图像，让我们简单实现示例轮播图的HTML结构。

HTML结构

我们将创建一个简单的轮播图，以显示遮罩效果。 我们的轮播图将填满整个屏幕，我们将添加一些将触发轮播图切换的箭头。 想法是覆盖轮播图，然后在动画结束时更改轮播图的z-index。 轮播图的结构如下：

    
	
     
		
      
			
       
“All good things are 
 wild & free”
			
       
Photo by Andreas Rønningen
		
      
	
     
	
     
		
      
			
       
“Into the wild”
			
       
Photo by John Price
		
      
	
     
	
     
		
      
			
       
“Is spring coming?”
			
       
Photo by Thomas Lefebvre
		
      
	
     
	
     
		
      
			
       
“Stay curious”
			
       
Photo by Maria
		
      
	
     
	
     
    
复制代码

page view是我们的全局容器，它将包含我们的所有轮播图（project); 每一个都包含一个标题和一个图例。 此外，我们将为每张轮播图设置单独的背景图像。

箭头将作为下一个或上一个动画的触发器，并在轮播图中导航。

我们来看看这个风格吧。

CSS样式

在这部分中，我们将为我们的效果添加CSS。

我们将设置布局，其中包含一些居中的标题和页面左下角的导航。 此外，我们将定义一些媒体查询来兼容移动设备的展示。

此外，我们将雪碧图设置为全局容器中的不可见背景，以便我们在打开页面时开始加载它们。

.demo-1 {	background: url(../img/nature-sprite.png) no-repeat -9999px -9999px;	background-size: 0;}.demo-1 .page-view {	background: url(../img/nature-sprite-2.png) no-repeat -9999px -9999px;	background-size: 0;}复制代码

每页轮播图都有一个不同的背景图像：

.demo-1 .page-view .project:nth-child(1) {	background-image: url(../img/nature-1.jpg);}.demo-1 .page-view .project:nth-child(2) {	background-image: url(../img/nature-2.jpg);}.demo-1 .page-view .project:nth-child(3) {	background-image: url(../img/nature-3.jpg);}.demo-1 .page-view .project:nth-child(4) {	background-image: url(../img/nature-4.jpg);}复制代码

这当然是你将动态实现的东西，但我们对效果感兴趣，所以让我们保持简单。

我们定义一个名为hide的类，只要我们想隐藏某个元素就可以添加它。 类定义包含我们用作遮罩的雪碧图。

知道一个帧是100％的屏幕，我们的动画包含23个图像，我们需要将宽度设置为23 * 100％= 2300％。

现在我们使用步骤添加CSS动画。 我们希望我们的雪碧图在最后一帧的开头停止。 因此，要实现这一目标，我们需要比总数少一步，即22步：

.demo-1 .page-view .project:nth-child(even).hide {	-webkit-mask: url(../img/nature-sprite.png);	mask: url(../img/nature-sprite.png);	-webkit-mask-size: 2300% 100%;	mask-size: 2300% 100%;	-webkit-animation: mask-play 1.4s steps(22) forwards;	animation: mask-play 1.4s steps(22) forwards;}.demo-1 .page-view .project:nth-child(odd).hide {	-webkit-mask: url(../img/nature-sprite-2.png);	mask: url(../img/nature-sprite-2.png);	-webkit-mask-size: 7100% 100%;	mask-size: 7100% 100%;	-webkit-animation: mask-play 1.4s steps(70) forwards;	animation: mask-play 1.4s steps(70) forwards;}复制代码

最后，我们定义动画关键帧：

@-webkit-keyframes mask-play {  from {	-webkit-mask-position: 0% 0;	mask-position: 0% 0;  }  to {	-webkit-mask-position: 100% 0;	mask-position: 100% 0;  }}@keyframes mask-play {  from {	-webkit-mask-position: 0% 0;	mask-position: 0% 0;  }  to {	-webkit-mask-position: 100% 0;	mask-position: 100% 0;  }}复制代码

现在我们有了轮播图的结构和样式。 让我们给它添加一些动效吧！

JavaScript表现

我们将使用进行此演示，这是一个非常轻量级的JavaScript框架，类似于jQuery。

首先声明所有变量，设置持续时间和元素。

然后我们初始化事件，获取当前和下一张轮播图，设置正确的z-index。

function Slider() {	// Durations	this.durations = {		auto: 5000,		slide: 1400	};	// DOM	this.dom = {		wrapper: null,		container: null,		project: null,		current: null,		next: null,		arrow: null	};	// Misc stuff	this.length = 0;	this.current = 0;	this.next = 0;	this.isAuto = true;	this.working = false;	this.dom.wrapper = $('.page-view');	this.dom.project = this.dom.wrapper.find('.project');	this.dom.arrow = this.dom.wrapper.find('.arrow');	this.length = this.dom.project.length;	this.init();	this.events();	this.auto = setInterval(this.updateNext.bind(this), this.durations.auto);}/** * Set initial z-indexes & get current project */Slider.prototype.init = function () {	this.dom.project.css('z-index', 10);	this.dom.current = $(this.dom.project[this.current]);	this.dom.next = $(this.dom.project[this.current + 1]);	this.dom.current.css('z-index', 30);	this.dom.next.css('z-index', 20);};复制代码

我们在箭头上监听点击事件，如果当前轮播图没有涉及动画，我们会检查点击是否在下一个或上一个箭头上。 我们在调整“下一个”变量的值的时候切换轮播图。

/** * Initialize events */Slider.prototype.events = function () {	var self = this;	this.dom.arrow.on('click', function () {		if (self.working)			return;		self.processBtn($(this));	});};Slider.prototype.processBtn = function (btn) {	if (this.isAuto) {		this.isAuto = false;		clearInterval(this.auto);	}	if (btn.hasClass('next'))		this.updateNext();	if (btn.hasClass('previous'))		this.updatePrevious();};/** * Update next global index */Slider.prototype.updateNext = function () {	this.next = (this.current + 1) % this.length;	this.process();};/** * Update next global index */Slider.prototype.updatePrevious = function () {	this.next--;	if (this.next < 0)		this.next = this.length - 1;	this.process();};复制代码

这个函数是我们轮播图放映的核心：我们将类“hide”添加到当前轮播图，一旦动画结束，我们减少上一张轮播图的z-index，增加当前轮播图中的一个，然后删除隐藏 上一张轮播图的类。

/** * Process, calculate and switch between slides */Slider.prototype.process = function () {	var self = this;	this.working = true;	this.dom.next = $(this.dom.project[this.next]);	this.dom.current.css('z-index', 30);	self.dom.next.css('z-index', 20);	// Hide current	this.dom.current.addClass('hide');	setTimeout(function () {		self.dom.current.css('z-index', 10);		self.dom.next.css('z-index', 30);		self.dom.current.removeClass('hide');		self.dom.current = self.dom.next;		self.current = self.next;		self.working = false;	}, this.durations.slide);};复制代码

添加相应的类将触发我们的动画，然后遮罩图像应用于我们的轮播图。 主要思想是在动画功能中移动遮罩图像以创建过渡流。

就是这样！ 我希望这个教程对你有用，并且在创建你自己的酷遮罩效果时感受到乐趣！ 不要犹豫，分享你的作品，我很乐意看到他们！