clip-path区域裁剪学习

2022-05-011326次阅读css

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;
}

细节Demo还有Demo2

上一篇: Grid布局Flex布局水平和垂直居中  下一篇: css轻松移除最后一个子元素样式  

clip-path区域裁剪学习相关文章