clip-path属性创建一个区域可裁剪,其中的内容可见,而外部的内容不可见。
.card {
background-color: #77cce9;
clip-path: circle(80px at 50% 50%);
}
坐标系
在深入了解的细节之前clip-path,值得一提的是坐标系是如何工作的。原点是左上角,x 轴指向右侧,y 轴指向下方。
Clip-Path值
Inset
Inset可以控制四个边缘,就像我们处理边距或填充一样。
.card {
clip-path: inset(20px 20px 50px 20px);
}
取值与margin和padding一样的,四个值表示上右下左。一个值表示四个方向都是同一个值。
问题是我们可以给它画一个圆角吗?可以,多亏了round关键字。添加关键字round<border radius>可以实现圆角。
.card {
clip-path: inset(20px 20px 50px round 15px);
}
上面是上方20px左右20px下方50px的裁剪,并且有15px的圆角。
.card {
clip-path: inset(20px 20px 50px round 15px 0);
}
上面代码是上方20px左右20px下方50px的裁剪,并且有左上方及右下方有15px的圆角。
Circle
要使用circle()值画圆,我们需要它的半径和位置。
.card {
clip-path: circle(80px at 50% 50%);
}
Ellipse
使用ellipse(),我们可以设置宽度和高度来创建椭圆形剪裁。
.card {
clip-path: ellipse(100px 80px at center);
}
Polygon
polygon()我们能够控制多组不同的x轴和y轴值。
.card {
clip-path: polygon(x y, x y, x y, x y);
}
下面是一个使用polygon()剪裁矩形的示例。请注意,我是如何将每组点映射到轴上的坐标的。
.card {
clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
}
多边形值调整8个数字可能会很烦人。出于这个原因,我有一个小技巧给你,那就是依靠浏览器来创建我们想要的形状。首先,我们需要添加以下代码:
.section {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
然后,我们需要用Firefox浏览器,记住是Firefox浏览,选中标签打开开发者工具,请注意值的左侧有一个小多边形图标polygon()。
单击该图标后,我们可以在浏览器中编辑多边形。
我们还可以将CSScalc()与CSS视口单位混合使用,以使角度相对于视口的宽度。
.section {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
}
Path
path()值允许我们使用SVG路径剪裁特定区域。目前,浏览器支持并不一致。为了让它在不同的浏览器中工作,我们需要使用内联SVG,然后使用url()作为剪辑路径的值。
.card {
clip-path: url("#triangle");
}
多角度效果
<div class="hero">
<img src="bg.jpg" alt="" />
</div>
.hero {
position: relative;
min-height: 350px;
}
.hero img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 90%);
}
.hero:after {
content: "";
position: absolute;
left: 0;
bottom: -20%;
z-index: -1;
width: 100%;
height: 100%;
background-color: #4545a0;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 90%);
}
我们有一个伪元素,其大小和剪辑路径与另一个元素相同。不同之处在于,它位于底部:-20%,z指数:-1。我使用了20%的值,因为它是100-80的结果。
卷轴展示
通过使用IntersectionObserver API,我们可以在用户滚动时显示页面上的某些元素。
我发现对这种效果最有用的剪辑路径值是inset。
请注意,通过应用inset(50%),蓝色矩形可以完全不可见。是的,使其不可见的值是50%,因为我们从四面应用了一个inset。换句话说,inset是从矩形的边缘到中心应用的。
下面的javascript代码添加了对视口中的每个图像可见的类。有了它,我们可以通过滚动显示图像。
const images = document.querySelectorAll("img");
function check(entries) {
entries.map((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
}
});
}
const observer = new IntersectionObserver(check);
images.forEach((image) => observer.observe(image));
img {
clip-path: inset(50%);
transition: 1.2s ease-in;
}
img.is-visible {
clip-path: inset(0);
}
是不是很简单,我们用几行CSS和Javascript创建了一个简单的滚动效果。
clip-path实现过渡的方向动画
可以查看Demo
clip-path实现悬停和动画效果
:root {
--pos: left center;
--size: 0;
}
.stats__item:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #7777e9;
clip-path: circle(var(--size) at var(--pos));
transition: 0.4s linear;
}
.stats__item:hover:before {
--size: 300px;
}