CSS3动画（2）：mask实现line-wipe动画-原创手记-慕课网

这次给大家带来的动画是使用mask（蒙版）实现line-wipe动画。效果如下：

webp

lineWipe.gif

上一篇动画:CSS3制作展示图片的cube动画有兴趣的可以看看哦！
mask知识总结：
1.| 属性 | 值 |
| ----- |:------:|
|-webkit-mask-image|url / gradient 可以使用图片或渐变作为遮罩层;
|-webkit-mask-repeat|repeat / repeat-x / repeat-y / no-repeat;
|-webkit-mask-position|x,y;
|-webkit-mask-clip|border / padding / content
|-webkit-mask-origin|border / padding / content
|-webkit-mask-size|width height（百分比或数字+px）/cover/contain
2.蒙版黑色为可见部分，灰色过渡，白色为不可见。（注意）
3.蒙版实际上是一张图片，在动画中是看不见的。如

webp

linewipe-mask.png

例如：
-webkit-mask-image: url(../img/linewipe-mask.png);
-webkit-mask-size: 1200px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: -360px -300px;
制作思路：
利用-webkit-mask-image 实现添加蒙版，蒙版由左往右移动，从而实现一张图片由左至右消失。在前面的div（div1）下放另一个div（相同位置，div2）。当蒙版位置移动，div1的图片消失，div2的图片逐渐出现，当这一动画结束后，让div1替换成div2的图片，div2替换成下一张图片，移除添加动画的class，div1在前面，div2在后面，蒙版位置也恢复原状，再继续动画，替换图片，移除动画，恢复原状，一直循环下去。
具体代码实现：
html：

<div class="outer_box">    <div class="face"></div><!--这个div在后面-->
    <div class="face"></div><!--这个div在前面--></div>

css:在div2添加蒙版，不影响div1

.outer_box{    width: 600px;    height: 400px;    position: relative;    left: 200px;    top: 150px;
}.face{    position: absolute;    width: 600px;    height: 400px;
}.face:nth-child(1){     /*这个div在后面*/
    background-image: url(../img/sample2.jpg);    background-repeat: no-repeat;
}.face:nth-child(2){     /*这个div在前面*/
    background-image: url(../img/sample1.jpg);    background-repeat: no-repeat;    -webkit-mask-image: url(../img/linewipe-mask.png);    -webkit-mask-size: 1200px;    -webkit-mask-repeat: no-repeat;    -webkit-mask-position: -360px -300px;
}/*.show这个类实现mask的位置移动过渡动画*/.face.show{    -webkit-transition: -webkit-mask-position 3s linear 1s;/*实现mask移动动画，从而达到line wipe动画效果*/
    -webkit-mask-position: 1200px -300px;
}

js:通过添加和移除class（.show），达到实现mask从左到右移动动画，并通过替换图片实现图片切换。

    <script>
        window. = function(){            var index = 2 , nextIndex = index + 1;            var face = document.querySelectorAll('.face');
            setInterval(function(){
                face[1].classList.add('show');  /*给前面的div添加蒙版，实现动画效果*/
            },500);
            
            face[1].addEventListener('webkitTransitionEnd',function(){                if(index == 4)
                    nextIndex = 1;      //最后一张图片与第一张图片的切换
                else    
                    nextIndex = index + 1;
                face[0].style.backgroundImage = 'url(img/sample'+nextIndex+'.jpg)';
                face[1].style.backgroundImage = 'url(img/sample'+index+'.jpg)';     
                face[1].classList.remove('show');   
                index = nextIndex;  
            })
        }    </script>

ps：目前只兼容chrome哦！
整个项目源代码欢迎下载哦！

作者：zyfEve
链接：https://www.jianshu.com/p/15d506e54700