Clip Path 的魔法

clip-path is often used for trimming a DOM node into specific shapes, like triangles. But what if I told you that it’s also great for animations?

clip-path 常被用来把 DOM 节点裁剪成特定形状，比如三角形。但如果我告诉你它也很适合用来做动画呢？

In this article, we’ll dive into clip-path and explore some of the cool things you can do with it. Once you read it, you’ll start seeing this CSS property being used everywhere.

在本文中，我们将深入探讨 clip-path，并探索一些你可以用它实现的酷炫效果。读完之后，你会开始发现这个 CSS 属性无处不在。

The clip-path property is used to clip an element into a specific shape. We create a clipping region with it, content outside of this region will be hidden, while content inside will be visible. This allows us to easily turn a rectangle into a circle for example.

clip-path 属性用于将元素裁剪成特定形状。我们用它创建一个裁剪区域，区域外的内容会被隐藏，区域内的内容则可见。这让我们可以轻松地把矩形变成圆形。

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

This has no effect on layout meaning that an element with clip-path will occupy the same space as an element without it, just like transform.

这对布局没有影响，这意味着带有 clip-path 的元素与不带它的元素占据相同的空间，就像 transform 一样。

We positioned our circle above using a coordinate system. It starts at the top left corner (0, 0). circle(50% at 50% 50%) means that the circle will have a border radius of 50% and will be positioned at 50% from the top and 50% from the left, which is the center of the element.

我们使用坐标系将圆形定位在上方。坐标系从左上角 (0, 0) 开始。circle(50% at 50% 50%) 表示圆的 border-radius 为 50%，并且位于元素顶部 50%、左侧 50% 的位置，也就是元素的中心。

There are other values like ellipse, polygon, or even url() which allows us to use a custom SVG as the clipping path, but we are going to focus on inset as that’s what we’ll be using for all animations in this post.

还有其他值，如 ellipse、polygon，甚至 url()，后者允许我们使用自定义 SVG 作为裁剪路径，但本文将专注于 inset，因为本文中的所有动画都会用到它。

The inset values define the top, right, bottom, and left offsets of a rectangle. This means that if we use inset(100%, 100%, 100%, 100%), or inset(100%) as a shortcut, we are "hiding" (clipping) the whole element. An inset of (0px 50% 0px 0px) would make the right half of the element invisible, and so on.

inset 值...