這次給大家?guī)淼膭赢嬍鞘褂胢ask（蒙版）實(shí)現(xiàn)line-wipe動畫。效果如下：
lineWipe.gif
上一篇動畫:CSS3制作展示圖片的cube動畫有興趣的可以看看哦！
mask知識總結(jié)：
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（百分比或數(shù)字+px）/cover/contain
2.蒙版黑色為可見部分，灰色過渡，白色為不可見罩锐。（注意）
3.蒙版實(shí)際上是一張圖片，在動畫中是看不見的。如
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 實(shí)現(xiàn)添加蒙版师坎，蒙版由左往右移動，從而實(shí)現(xiàn)一張圖片由左至右消失堪滨。在前面的div（div1）下放另一個(gè)div（相同位置胯陋，div2）。當(dāng)蒙版位置移動袱箱，div1的圖片消失遏乔，div2的圖片逐漸出現(xiàn)，當(dāng)這一動畫結(jié)束后 发笔，讓div1替換成div2的圖片盟萨，div2替換成下一張圖片，移除添加動畫的class了讨，div1在前面捻激，div2在后面，蒙版位置也恢復(fù)原狀前计，再繼續(xù)動畫胞谭，替換圖片，移除動畫男杈，恢復(fù)原狀丈屹，一直循環(huán)下去。
具體代碼實(shí)現(xiàn)：
html：
<div class="outer_box">
<div class="face"></div><!--這個(gè)div在后面-->
<div class="face"></div><!--這個(gè)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){ /*這個(gè)div在后面*/
background-image: url(../img/sample2.jpg);
background-repeat: no-repeat;
}
.face:nth-child(2){ /*這個(gè)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這個(gè)類實(shí)現(xiàn)mask的位置移動過渡動畫*/
.face.show{
-webkit-transition: -webkit-mask-position 3s linear 1s;/*實(shí)現(xiàn)mask移動動畫泉瞻，從而達(dá)到line wipe動畫效果*/
-webkit-mask-position: 1200px -300px;
}
js:通過添加和移除class（.show）脉漏，達(dá)到實(shí)現(xiàn)mask從左到右移動動畫，并通過替換圖片實(shí)現(xiàn)圖片切換袖牙。
<script>
window.onload = function(){
var index = 2 , nextIndex = index + 1;
var face = document.querySelectorAll('.face');
setInterval(function(){
face[1].classList.add('show'); /*給前面的div添加蒙版侧巨，實(shí)現(xiàn)動畫效果*/
},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哦！
整個(gè)項(xiàng)目源代碼歡迎下載哦鞭达！
