用CSS遮罩实现过渡效果的示例代码
发布时间：2020-03-29 07:03:05 所属栏目：站长百科 来源：站长网
导读：副标题#e# 今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样，遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中，我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和位于图片之上的PNG实现一个有趣
|
/** * 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 （编辑：西安站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |