1200字范文 > css 蒙版效果_CSS蒙版的过渡效果

css 蒙版效果_CSS蒙版的过渡效果

时间：2023-02-17 19:34:57

相关推荐

css 蒙版效果_CSS蒙版的过渡效果

css 蒙版效果

View demo 查看演示 Download Source 下载源

Today we’d like to show you how to create an intriguingly simple, yet eye-catching transition effect using CSS Masks. Together with clipping, masking is another way of defining visibility and composite with an element. In the following tutorial we’ll show you how to apply the new properties for a modern transition effect on a simple slideshow. We’ll be applying animations utilizing the steps() timing function and move a mask PNG over an image to achieve an interesting transition effect.

今天，我们想向您展示如何使用CSS Masks创建一个有趣而简单的过渡效果。与剪切一起，遮罩是定义可见性和与元素合成的另一种方法。在下面的教程中，我们将向您展示如何在新的幻灯片上应用新属性以获得现代过渡效果。我们将利用steps()计时功能应用动画，并在图像上移动mask PNG以实现有趣的过渡效果。

Attention:Please keep in mind that this effect is注意：请记住，此效果是highly experimentaland only supported by some modern browsers (Chrome, Safari and Opera for now).高度实验性的，并且仅受某些现代浏览器(目前为Chrome，Safari和Opera)支持。

CSS蒙版 (CSS Masks)

Method of displaying part of an element, using a selected image as a mask

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

W3C Candidate Recommendation

W3C候选人推荐

Supported from the following versions:

受以下版本支持：

桌面 (Desktop)

没有

手机/平板电脑(Mobile / Tablet)

没有

* denotes prefix required.

*表示必填前缀。

Supported:支持的： Yes是 No没有Partially部分地PolyfillPolyfill

Stats from

来自的统计数据

Keep in mind that Firefox has only partial support (it only supports inline SVG mask elements) so we’ll have a fallback for now. Hopefully, we can welcome support in all modern browsers very soon. Note that we’re adding Modernizr to check for support.

请记住，Firefox仅部分支持(它仅支持内联SVG掩码元素)，因此我们现在会有一个后备。希望我们很快能在所有现代浏览器中提供支持。请注意，我们正在添加Modernizr来检查支持。

So let’s get started!

因此，让我们开始吧！

创建遮罩图像 (Creating the Mask Image)

In this tutorial we’ll be going through the first example (demo 1).

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

For the mask transition effect to work, we will need an image that we’ll use to hide/show certain parts of our underlying image. That mask image will be a PNG with transparent parts on it. The PNG itself will be a sprite image and it looks as follows:

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

While the black parts will show the current image, the white part (which is actually transparent) will be the masked part of our image that will reveal the second image.

黑色部分将显示当前图像，而白色部分(实际上是透明的)将成为我们图像的遮罩部分，从而显示出第二张图像。

In order to create the sprite image we will use this video. We import it into Adobe After Effects to reduce the timing of the video, remove the white part and export it as a PNG sequence.

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

To reduce the duration to 1.4 seconds (the time we want our transition to take) we’ll use theTime stretcheffect.

为了将持续时间减少到1.4秒(我们希望过渡完成的时间)，我们将使用时间拉伸效果。

To remove the white part we will useKeying -> extractand set the white point to 0. In the screenshot below, the blue portion is the background of our composition, the transparent parts of the video.

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

Finally, we can save our composition as a PNG sequence and then use Photoshop or a tool like this CSS sprite generator to generate a single image:

最后，我们可以将合成保存为PNG序列，然后使用Photoshop或类似CSS Sprite Generator的工具生成单个图像：

This is one sprite image for a very organic looking reveal effect. We’ll create another, “inversed” sprite for the opposite kind of effect. You’ll find all the different sprites in theimgfolder of the demo files.

这是一个精灵图像，具有非常有机的外观效果。我们将创建另一种“相反”的精灵，以产生相反的效果。您将在演示文件的img文件夹中找到所有不同的精灵。

Now, that we’ve created the mask image, let’s dive into the HTML structure for our simple example slideshow.

现在，我们已经创建了遮罩图像，让我们深入了解简单示例幻灯片HTML结构。

标记 (The Markup)

For our demo, we’ll create a simple slideshow to show the mask effect. Our slideshow will fill the entire screen and we’ll add some arrows that will trigger the slide transitions. The idea is to superpose the slides and then change the z-index of the incoming slide when the animation is over. The structure for our slideshow looks as follows:

对于我们的演示，我们将创建一个简单的幻灯片来显示蒙版效果。我们的幻灯片将填满整个屏幕，并添加一些箭头来触发幻灯片过渡。想法是叠加幻灯片，然后在动画结束时更改传入幻灯片的z索引。幻灯片的结构如下：

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

The divisionpage-viewis our global container, it will contain all our slides. Theprojectdivisions are the slides of our slideshow; each one contains a title and a legend. Additionally, we’ll set an individual background image for each slide.

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

The arrows will serve as our trigger for the next or previous animation, and to navigate through the slides.

箭头将用作下一个或上一个动画的触发器，并在幻灯片中导航。

Let’s have a look at the style.

让我们来看看样式。

CSS (The CSS)

In this part we’ll define the CSS for our effect.

在这一部分中，我们将为效果定义CSS。

We’ll set up the layout for a classic fullscreen slider, with some centered titles and the navigation at the bottom left of the page. Moreover, we’ll define some media queries to adapt the style for mobile devices.

我们将为经典的全屏滑块设置布局，其中一些居中标题和导航位于页面左下方。此外，我们将定义一些媒体查询以适应移动设备的样式。

Furthermore, we’ll set our sprite images as invisible backgrounds on our global container just so that we have them start loading when we open the page.

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

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

Each slide will have a different 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);}

This would of course be something that you’ll dynamically implement but we are interested in the effect, so let’s keep it simple.

当然，这将是您可以动态实现的，但是我们对效果很感兴趣，因此让我们保持简单。

We define a class namedhidethat we will add to the slide whenever we want to hide it. The class definition contains our sprite applied as a mask.

我们定义了一个名为hide的类，只要我们想隐藏它，就将其添加到幻灯片中。类定义包含应用为蒙版的精灵。

Knowing that a frame is 100% of the screen and our animation contains 23 images, we will need to set the width to 23 * 100% = 2300%.

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

Now we add our CSS animation utilizingsteps. We want our sprite to stop at the beginning of our last frame. Hence, to achieve this, we need to count one less step than the total, which is 22 steps:

现在，我们使用步骤添加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;}

Finally, we define the animation keyframes:

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

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

And here we go; we now have a structured and styled slideshow. Let’s turn it into something functional!

现在我们开始; 我们现在有一个结构化和样式化的幻灯片。让我们把它变成功能！

JavaScript (The JavaScript)

We will be using zepto.js for this demo which is a very lightweight JavaScript framework similar to jQuery.

我们将在此演示中使用zepto.js ，这是一个非常轻巧JavaScript框架，类似于jQuery。

We start by declaring all our variables, setting the durations and the elements.

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

Then we initialize the events, get the current and the next slide, set the correct z-index.

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

We listen for the click event on the arrows, and if the slideshow is not currently involved in an animation, we check if the click was on the next or previous arrow. Like that we adapt the value of the “next” variable and we proceed to change the slide.

我们侦听箭头上的click事件，如果动画当前不涉及幻灯片放映，则检查单击是否在下一个或上一个箭头上。这样，我们调整“ next”变量的值，然后继续更改幻灯片。

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

This function is the heart of our slideshow: we set the class“hide”to the current slide and once the animation is over, we reduce the z-index of the previous slide, increase the one of the current slide and then remove thehideclass of the previous slide.

此功能是幻灯片放映的核心：我们将“ hide”类设置为当前幻灯片，动画结束后，我们将减小上一张幻灯片的z-index，增加当前幻灯片的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 currentthis.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);};

Adding the respective classes will trigger our animations which in turn apply the mask image to our slides. The main idea is to move the mask in a step animation function in order to create transition flow.

添加相应的类将触发我们的动画，这些动画又将蒙版图像应用于幻灯片。主要思想是在逐步动画功能中移动蒙版，以创建过渡流。

And that’s it! I hope you find this tutorial useful and have fun creating your own cool mask effects! Don’t hesitate to share your creations, I would love to see them!

就是这样！希望本教程对您有所帮助，并乐于创建自己的炫酷蒙版效果！不要犹豫，分享您的作品，我很乐意看到它们！

Browser Support:浏览器支持：

ChromeSupported

支援Chrome

FirefoxNot supported

Firefox不支持

Internet ExplorerNot supported

Internet Explorer不支援

SafariSupported

Safari支持

OperaSupported

歌剧支持