这次给大家带来的动画是使用mask（蒙版）实现line-wipe动画。效果如下：
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.蒙版实际上是一张图片，在动画中是看不见的。如
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
随时随地看视频
