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 experimental and 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)

• No

  没有

• 53

  53

• No

  没有

• No

  没有

• No

  没有

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

• No

  没有

• No

  没有

• No

  没有

• No

  没有

• 79

  79

* denotes prefix required.

*表示必填前缀。

• Supported:
  支持的：
• Yes