当前位置:首页 >> 网页制作

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

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

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

CSS Masks(CSS遮罩)

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

W3C的候选推荐

支持以下版本:

Desktop

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

Mobile / Tablet

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

支持情况:

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

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

创建遮罩图像

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

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

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

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

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

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

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

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

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

我们将创建另一个“反向”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>

<div>作为整个容器,<div>是我们创建的幻灯片的各个部分,每一部分都包换了一个图片标题和图片说明。另外,每张幻灯片都设置了一张单独的背景图。其中的箭头部分用于触发下一张或者是上一张幻灯片。

The CSS

我们设置了一个传统的全屏轮播图布局,中心放置标题,左下角放置页面导航。此外定义了@media 查询以适应移动设备的样式。另外将sprite images设置为容器中不可见的背景,这样做是为了在打开网页的时候确保sprite images开始加载。

.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;
}

每一张幻灯片都有不同的background-image:

.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的class,当需要隐藏某张幻灯片的时候,将这个class添加上去。这个class定义了用于遮罩的sprite image。
每一帧是100%全屏展示,我们的动画包含23张图像,需要将宽度设置为23×100%=2300%。使用CSS3 animation的steps方式过渡,添加CSS动画。我们想让sprite停在最后一帧的开头。要做到这一点,需要的步数比总数少一步,也就是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;
  }
}

到这里,我们现在用了具有结构和样式的幻灯片了,接下来是让它更加具有实用性!

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

The JavaScript

在这个例子中用到了 zepto.js ,它是一个非常轻量级的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();
};

这个函数是这个demo的核心函数,当我们设置当前播放的这张幻灯片的class为hide时,动画一旦结束。将上一张幻灯片的z-index减小,增加当前幻灯片的z-index值,并移除上一张幻灯片的hide class。

/**
 * 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);
};

添加相应的class触发动画,进而将遮罩图像应用到幻灯片中。其主要思想是step animation过程中移动遮罩,以创建过渡流。

英文原文:Transition Effect with CSS Masks

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。