CSS3“蒙版(剪切路径)”: clip-path
Posted 我分享我快乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3“蒙版(剪切路径)”: clip-path相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html>
<head>
<script ></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 >
<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>
以上是关于CSS3“蒙版(剪切路径)”: clip-path的主要内容，如果未能解决你的问题，请参考以下文章
css3中使用clip-path将图片裁剪成不规则图形添加边框
基于clip-path的任意元素的碎片拼接动效(源自鑫空间)