用CSS遮罩实现过渡效果的示例代码
|
副标题[/!--empirenews.page--]
今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样，遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中，我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和位于图片之上的PNG实现一个有趣的过渡效果。steps()是一个timing function，允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。这个函数有两个参数，第一个参数是一个正值，指定我们希望动画分割的段数。 注意: 该效果是高度试验性的，只被一些现代浏览器支持（Chrome、Safari、Opera）。 CSS Masks（CSS遮罩） 使用选定图像作为遮罩，用于显示元素的一部分的方法 W3C的候选推荐 支持以下版本： Desktop Mobile / Tablet 支持情况: 注意Firefox只是部分支持（它只支持内嵌的SVG遮罩元素），所以我们只能退一步希望所有的现代浏览器都尽快的提供支持。我们可以使用Modernizr来检查浏览器的支持情况。 创建遮罩图像 要实现遮罩过渡效果，我们需要一个图像来隐藏/显示我们底层图像的某些部分。该遮罩图像是具有透明部分的PNG图像。它自身应该是一个sprite image看起来像下面这样： 黑色部分显示当前图片，同时白色部分（透明部分）作为当前图像的遮罩，显示第二张图片。 为了创建sprite image，我们将视频导入到Adobe After Effects以减少视频的时间，移除白色部分并导出为PNG序列。为了将持续时间减为1.4秒（过渡时常），我们将使用Time strech效果。 要删除白色部分，我们将使用 extract键 设置白点到0。在下面的截图中，蓝色部分是背景是视频的透明部分。 最后，我们将其存储为PNG序列，然后使用Photoshop 或类似的图像处理软件将它生成了一个单一的图像。 我们将创建另一个“反向”sprite image，以产生相反的效果。你可以在演示文件的img文件夹中找到的所有的sprite image。 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); } 这部分可以用代码动态实现，但我们更关心切换的过渡效果，这里这样写就比较简单。 （编辑：源码网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
