CSS3 clip-path 用法介绍
clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。
一、基本概念
-
将两张图片通过定位，相对于图片容器堆叠在一起；
-
在图片容器的左上角或右下角选取一个圆心，绘制一个圆，不断加大圆的半径来显示第二张图片；
-
上划下拉时，根据滑动速度动态改变圆的半径；
-
当图片容器距屏幕顶部或底部的距离为 0 时，则相应的改变图片堆叠顺序及圆心位置。
clip: rect(60px, 60px, 60px, 60px); // 标准写法
clip: rect(60px 60px 60px 60px); // 兼容 ie 及 火狐浏览器
二、用法实践
圆 circle
clip-path: circle(25% at 50% 50%);
椭圆 ellipse
clip-path: ellipse(25% 25% at 50% 50%);
inset
clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%);
多边形 polygon
clip-path: polygon(50% 0, 25% 50% ,75% 50%);
url
<section class="container">
<img src="img01.jpg" class="contract">
<img src="img02.jpg">
</section>
<svg height="0" width="0">
<clipPath id="clip02">
<circle cx="400" cy="210" r="0">
<animate
attributeType="CSS"
attributeName="r"
values="0;480;0"
dur="9s"
repeatCount="2"
/>
</circle>
</clipPath>
</svg> .contract {
clip-path: url(#clip02);
z-index:1;
}
兼容性
三、经验总结
四、参考链接
作者：创宇前端,
来源：掘金
链接：https://juejin.im/post/5a975c14f265da4e9c635ea4
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
