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

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