CSS遮罩的过渡效果有趣的幻灯片

今天，我们想向您展示如何使用CSS Masks创建一个有趣而简单却引人注目的过渡效果。与裁剪一起，遮罩是定义可见性和与元素合成的另一种方式。在下面的教程中，我们将向您展示如何在简单的幻灯片上应用现代过渡效果的新属性。我们将使用步骤（）计时功能应用动画，并将掩模PNG移动到图像上以实现有趣的过渡效果。

注意：请记住，这种效果是高度实验性的，只有一些现代浏览器（现在的Chrome，Safari和Opera）才支持。

CSS面具

显示部分元素的方法，使用选定的图像作为蒙版

W3C候选推荐

来自caniuse.com的统计信息

请记住，Firefox只有部分支持（它只支持内联的SVG掩码元素），所以我们现在有一个回退。希望我们很快就能欢迎所有现代浏览器的支持。请注意，我们正在添加Modernizr来检查支持。

所以让我们开始吧！

创建蒙版图像

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

为了使遮罩过渡效果起作用，我们需要一个图像来隐藏/显示底层图像的某些部分。该蒙版图像将是一个带有透明部分的PNG。PNG本身将是一个精灵图像，它看起来如下：

虽然黑色部分将显示当前图像，但白色部分（实际上是透明的）将成为我们图像的蒙版部分，将显示第二个图像。

为了创建精灵图片，我们将使用这个视频。我们将其导入到Adobe After Effects中以减少视频的时间，将白色部分删除并将其导出为PNG序列。

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

要删除白色部分，我们将使用键控 - >提取并将白色点设置为0.在下面的截图中，蓝色部分是我们构图的背景，即视频的透明部分。

最后，我们可以将我们的作品保存为PNG序列，然后使用Photoshop或像这样的CSS Sprite生成器来生成单个图像：

这是一个非常有机的显示效果的精灵图像。我们将创建另一个“反转”的精灵来达到相反的效果。您将在演示文件的img文件夹中找到所有不同的精灵。

现在，我们已经创建了蒙版图像，让我们深入到我们简单的幻灯片示例的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

部门页面视图是我们的全球容器，它将包含我们所有的幻灯片。该项目的部门是我们的幻灯片的幻灯片; 每一个都包含一个标题和一个图例。另外，我们将为每个幻灯片设置单独的背景图像。

箭头将作为我们触发下一个或上一个动画，并浏览幻灯片。

让我们来看看这个风格。

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

我们将使用zepto.js来演示这个与jQuery类似的轻量级JavaScript框架。

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

然后我们初始化事件，获取当前和下一张幻灯片，设置正确的Z-索引。

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.init();

this.events();

}/*** Set initial z-indexes & get current project*/

};

我们监听箭头上的点击事件，如果幻灯片当前不包含在动画中，我们检查点击是否在下一个或上一个箭头上。就像我们调整“下一个”变量的值一样，我们继续改变幻灯片。

/*** Initialize events*/

var self = this;

if (self.working)

return;

self.processBtn($(this));

});

};

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 */

this.next = (this.current + 1) % this.length;

this.process();

};/*** Update next global index*/

this.next--;

if (this.next

this.next = this.length - 1;

this.process();

};

这个功能是我们幻灯片的核心：我们将类“隐藏”设置为当前幻灯片，一旦动画结束，我们减少前一张幻灯片的Z-索引，增加当前幻灯片的Z-索引，然后删除隐藏上一张幻灯片的类。

/*** Process, calculate and switch between slides*/

var self = this;

this.working = true;

// Hide current

setTimeout(function () {

self.current = self.next;

self.working = false;

};

添加相应的类将触发我们的动画，然后将蒙版图像应用到我们的幻灯片。主要思想是在步骤动画功能中移动蒙版以创建转换流程。

而就是这样！我希望你找到这个教程有用，并创造你自己的酷面具效果乐趣！不要犹豫，分享你的创作，我很想看到他们！