CSS3“蒙版(剪切路径)”: clip-path
CSS3“蒙版(剪切路径)”: clip-path
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<style>
.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);}
}
</style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="box">
<img src="images/p2.jpg">
<div class="mask"></div>
<div class="mask"></div>
</div>
<script>
$(".box").mouseenter(
function(){
$(".mask:first").addClass("clipleft")
$(".mask:last").addClass("clipright")
}
).mouseleave(
function(){
$(".mask:first").removeClass("clipleft")
$(".mask:last").removeClass("clipright")
}
)
</script>
</body>
</html>