简单理解clip-path

2021年10月26日 17:51 · 阅读 1037

介绍

clip-path 属性创造一个剪切区域，内容在该区域是可见的，而该区域之外是隐藏。以下例子演示一个圆形剪切区域。

兼容情况目前兼容性还可以（IE 除外）

从 ⚪ 开始

.card {
  background-color: #77cce9;
  clip-path: circle(80px at 50% 50%);
}

clip-path

.card 使用 clip-path 后，可见区域只有一个蓝色圆，所有圆之外的内容是不可见的。

用坐标系说明

在深入了解 clip-path 的细节前，值得提下直角坐标系的运作。原点是左上角，x 轴向右，y 轴向下;

坐标系

记住这一点，看一个简单的例子演示元素怎样被裁剪。在这例子中，剪切区域是一个大小 100px 的圆，它的中心在 0,0 (左上角)。

100px 的圆

注意只有强调区域(暗蓝色)是用户可见的，圆之外的区域被裁剪了。问题是，我们怎样才能把整个圆演示出来？我们需要改变 x 和 y 轴的点。

完整的⚪

圆心是在距左边 x 轴 100px，上边的 y 轴 100px。

Clip-Path 的值

定义矩形（Inset）

矩形由内向外的距离

定义矩形

设置上下左右

定义矩形2

嵌入圆角

利用关键词 round

嵌入长方边

定义圆（circle）

.card {
  clip-path: circle(80px at 50% 50%);
}

定义椭圆（ellipse`[ɪˈlɪps]`）

定义多边形（polygon`[pɒlɪɡən]`）

对我来说，polygon() 是最有趣的。我们可以有能力去控制多个不同的 x 和 y 轴的值。

定义多边形

曾经难以实现的示例

示例 1 ：倾斜角

示例1

现在我们需要使用 polygon()。

.section {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

实例 2：滚动显示

yy 一下 MAC 的官网

实例2

注意通过 inset(50%) 元素会被隐藏。是因为我们从四边设定 inset。即是说，inset 从长方形的边缩小至中心。

我们还能控制展示过渡的方向。我们只需要四边的其中一边的值。例如，如果我们想要至顶向下的过渡，底的值应该从 100% 至 0。下图解释上述原理。

yy 一下微信，qq 删除联系人

实例3

实例 3：悬浮动画

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

实例 3

实例 4：连漪效果

.button {
  position: relative;
}

.button span {
  position: relative;
  z-index: 1;
}

.button:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.1;
  clip-path: circle(0 at center);
  transition: 0.3s ease-out;
}

.button:hover:before {
  clip-path: circle(100px at center);
}

连漪效果

总结

在 clip-path 之前，我们可以利用盒模型，利用 border-radius, border，transform，box-shadow 等来创建诸如矩形，圆形，椭圆，三角形等一些简单的形状。

clip-path 为我们提供了多边形的创建方案，我们完全可以在一些特定的场景下使用它来代替图片了。当然，clip-path 的作用不仅仅是如我上面介绍的那般简单，她还有很多奇妙的用处，尤其是配合动画一起使用