简单理解clip-path

·  阅读 1037
简单理解clip-path

介绍

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 的作用不仅仅是如我上面介绍的那般简单,她还有很多奇妙的用处,尤其是配合动画一起使用

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改