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>

本文分享自微信公众号 - 我分享我快乐(duan_uid)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-03-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券