css实现剪切蒙版,CSS3“蒙版(剪切路径)”: clip-path

.box{width:400px;height:300px;position:relative;}

.box img{width:100%;height:100%;}

.mask{width:100%;height:100%;border:solid 5px red;box-sizing:border-box;position:absolute;top:0;left:0;-webkit-clip-path:polygon(0 0, 0 0, 0 0);/*蒙版形状(裁切路径)*/}

.clipleft{ -webkit-animation:ml 0.6s linear forwards;}

.clipright{ -webkit-animation:mr 0.6s linear forwards;}

@keyframes ml{

/*蒙版形状动画*/

from{-webkit-clip-path:polygon(400px 300px, 400px 300px, 400px 300px);}

to{-webkit-clip-path:  polygon(400px 0, 0 300px, 400px 300px);}

}

@keyframes mr{

/*蒙版形状动画*/

from{-webkit-clip-path:polygon(0 0, 0 0, 0 0);}

to{-webkit-clip-path:polygon(0 0, 400px 0, 0 300px);}

}

无标题文档

$(".box").mouseenter(

function(){

$(".mask:first").addClass("clipleft")

$(".mask:last").addClass("clipright")

}

).mouseleave(

function(){

$(".mask:first").removeClass("clipleft")

$(".mask:last").removeClass("clipright")

}

)