用CSS遮罩完成过渡实际效果的示例编码

日期:2021-03-17 类型:科技新闻 

关键词:微信小程序商城,免费微信小程序,小程序设计软件,小程序生成平台,可查询的小程序

今日大家展现怎样用CSS遮罩建立1个趣味又简易但吸引住人的过渡实际效果。与剪裁1样,遮罩是此外1种界定可见性和元素组成的方法。在下面的实例教程中,大家将向你展现怎样运用新特性完成当代变换实际效果。大家将应用steps()和坐落于照片之上的PNG完成1个趣味的过渡实际效果。steps()是1个timing function,容许大家将动漫或过渡切分成段,而并不是从1种情况不断到另外一种情况的过渡。这个涵数有两个主要参数,第1个主要参数是1个恰逢,特定大家期待动漫切分的段数。

留意: 该实际效果是高宽比实验性的,只被1些当代访问器适用(Chrome、Safari、Opera)。

CSS Masks(CSS遮罩)

应用选定图象做为遮罩,用于显示信息元素的1一部分的方式

W3C的候选强烈推荐

适用下列版本号:

Desktop

Mobile / Tablet

适用状况:

留意Firefox只是一部分适用(它只适用嵌入的SVG遮罩元素),因此大家只能退1步期待全部的当代访问器都尽快的出示适用。大家可使用Modernizr来查验访问器的适用状况。

建立遮罩图象

要完成遮罩过渡实际效果,大家必须1个图象来掩藏/显示信息大家最底层图象的一些一部分。该遮罩图象是具备全透明一部分的PNG图象。它本身应当是1个sprite image看起来像下面这样:

黑色一部分显示信息当今照片,另外白色一部分(全透明一部分)做为当今图象的遮罩,显示信息第2张照片。

以便建立sprite image,大家将视頻导入到Adobe After Effects以降低视頻的時间,移除白色一部分并导出来为PNG编码序列。以便将不断時间减为1.4秒(过渡经常),大家将应用Time strech实际效果。

要删掉白色一部分,大家将应用 extract键 设定白点到0。在下面的截图中,蓝色一部分是情况是视頻的全透明一部分。

最终,大家将其储存为PNG编码序列,随后应用Photoshop 或相近的图象解决手机软件将它转化成了1个单1的图象。

大家将建立另外一个“反方向”sprite image,以造成相反的实际效果。你能够在演试文档的img文档夹中寻找的全部的sprite image。
如今,大家早已建立了遮罩图象,让大家深层次到这个转换示例的HTML构造中吧。

HTML

在这个事例中,建立1个简易的轮播图幻灯片来展现遮罩实际效果。轮播图将全屏显示信息,大家加上1些箭头用于开启幻灯片的过渡切换。思路是即将展现的幻灯片图象开展叠加,在每次过渡动漫完毕的情况下,根据更改它们的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>是大家建立的幻灯片的各个一部分,每一部分都包换了1个照片题目和照片表明。此外,每张幻灯片都设定了1张独立的情况图。在其中的箭头顶部分用于开启下1张或是上1张幻灯片。

The CSS

大家设定了1个传统式的全屏轮播图合理布局,管理中心置放题目,左下角置放网页页面导航栏。另外界定了@media 查寻以融入挪动机器设备的款式。此外将sprite images设定为器皿中不能见的情况,这样做是以便在开启网页页面的情况下保证sprite images刚开始载入。

.demo⑴ {
	background: url(../img/nature-sprite.png) no-repeat ⑼999px ⑼999px;
	background-size: 0;
}
 
.demo⑴ .page-view {
	background: url(../img/nature-sprite⑵.png) no-repeat ⑼999px ⑼999px;
	background-size: 0;
}

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

.demo⑴ .page-view .project:nth-child(1) {
	background-image: url(../img/nature⑴.jpg);
}
 
.demo⑴ .page-view .project:nth-child(2) {
	background-image: url(../img/nature⑵.jpg);
}
 
.demo⑴ .page-view .project:nth-child(3) {
	background-image: url(../img/nature⑶.jpg);
}
 
.demo⑴ .page-view .project:nth-child(4) {
	background-image: url(../img/nature⑷.jpg);
}

这一部分能够用编码动态性完成,但大家更关注切换的过渡实际效果,这里这样写就较为简易。

界定1个名叫hide的class,当必须掩藏某张幻灯片的情况下,将这个class加上上去。这个class界定了用于遮罩的sprite image。
每帧是100%全屏展现,大家的动漫包括23张图象,必须将宽度设定为23×100%=2300%。应用CSS3 animation的steps方法过渡,加上CSS动漫。大家想让sprite停在最终1帧的开始。要保证这1点,必须的步数比总数少1步,也便是22步:

.demo⑴ .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⑴ .page-view .project:nth-child(odd).hide {
	-webkit-mask: url(../img/nature-sprite⑵.png);
	mask: url(../img/nature-sprite⑵.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;
  }
}

到这里,大家如今用了具备构造和款式的幻灯片了,接下来是让它更为具备好用性!

The JavaScript

在这个事例选用到了 zepto.js ,它是1个十分轻量级的JavaScript 架构相近于jQuery。

最初是申明全部的自变量,设定不断時间和别的必须的元素。接下来原始化恶性事件,获得当今幻灯片和下1张幻灯片,设定正确的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);
};

监视箭头的点一下恶性事件,假如幻灯片如今沒有处在动漫全过程中,检验点一下的是上1张還是下1张箭头。假如点一下了下1张箭头,变更有关自变量的值并刚开始渐变色动漫。

/**
 * 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时,动漫1旦完毕。将上1张幻灯片的z-index减小,提升当今幻灯片的z-index值,并移除上1张幻灯片的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

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。