likes
comments
collection
share

clip-path 的一些妙用

作者站长头像
站长
· 阅读数 54

1. clip-path

  • css 的clip-path属性是clip属性的升级版，他们的作用都是对元素进行“裁剪”，不同的是clip只能作用于 position为absolute和fiexd的元素且裁剪区域只能是矩形，而clip-path更加强大，可以以任意形状去裁剪元素，并且对元素的定位方式没有要求。基于这样的特性，clip-path常用于实现一些炫酷的效果。
  • 例如： www.species-in-pieces.com/#
  • CSS clip-path maker bennettfeely.com/clippy/

2. 什么是裁剪（clip）

剪裁（clip）是一项允许你全部或部分隐藏元素的图像操作。 剪裁元素可以是任何元素或图像元素。哪部分元素将被显示是由剪裁路径（clipping path）决定的。

clip-path 的一些妙用 一个剪裁路径定义了一个范围，在这个范围之内的元素可以被显示，而范围之外的元素则被隐藏。任何在剪裁路径之外的元素都不会被绘制，任何内容，背景，边框，文字装饰，轮廓和可见的滚动机制的元素都可以应用裁剪路径。

3. 在CSS中进行图像裁剪-Clip-Path属性

clip-path是CSS Masking Module的一部分。从2000年开始，剪裁操作成为SVG的一部分，并且被移植到 CSS Masking module 中，因此我们可以像SVG元素一样使用CSS来裁剪HTML元素。

clip-path属性用于指定裁剪的路径。你可以通过一个SVG 的<clipPath>指定的路径来作为clip-path，也可以使用CSS Shapes module中定义的基本图形来作为clip-path。这些图形可以通过shape 函数来创建，可用的图像函数有：polygon()、circle()、inset()（用于定义inset rectangles）和ellipse()。

3 Basic Shape

basic-shape: 基本图形，包括 inset()、circle()、ellipse()、polygon()

<body>
  <div class="box">
    <img class="
      img 
      inset 
      circle 
      ellipse
      polygon
      animation_conditions
    " src="./hourse.jpeg" />
  </div>
</body>
  • 原图 clip-path 的一些妙用

1. Inset() 用于定义一个插进的矩形，即被裁剪元素内部的一块矩形区域

  1. 其中 shape-arg 分别为矩形的上右下左顶点（最外的边）到被剪裁元素边缘的距离（和margin、padding参数类似），border-radius 为可选参数，用于定义 border 的圆角。
  2. inset表示方形裁剪，函数提供来五个参数，前四个参数分别代表插进的长方形与相关盒模型的上右下左四个边界的偏移量，第五个可选参数<border-radius>用于定义插进长方形顶点的圆弧角度
参数类型 inset( <shape-arg>{1,4} [round <border-radius>]? )
.inset {
    clip-path: inset(100px 200px 10% 20% round 20px);
}

clip-path 的一些妙用

2. Circle() 用于定义一个圆

  1. circle表示圆形裁剪，函数提供两个可选参数，第一个圆形的半径，第二个圆心的位置
参数类型：circle( [<shape-radius>]? [at <position>]? )
 .circle {
     circle(100px at center)
 }

clip-path 的一些妙用

3. Ellipse() 用于定义一个椭圆

  1. 其中 shape-radius 为椭圆x、y轴的半径，position 为椭圆中心的位置。
  2. 第一个参数x轴方向半径，第二个参数y轴方向半径，第三个参数圆心的位置。
参数类型：ellipse( [<shape-radius>{2}]? [at <position>]? )
.ellipse {
  clip-path: ellipse(250px 100px at 50%);
}

clip-path 的一些妙用

4. Polygon() 用于定义一个多边形

  1. 其中 fill-rule 为填充规则，即通过一系列点去定义多边形的边界。
  2. ','逗号分组 (50%是中心) ，【每多一组就会按照顺时针方向多一个角】
  •  第一组： 12点钟方向第一个角
    参数1：x
    参数2：y


  • 第二组： 12点钟方向第二个角
    参数1：x
    参数2：y


  •  第三组： 12点钟方向第三个角
    参数1：x
    参数2：y


  •  第四组： 12点钟方向第四个角
    参数1：x
    参数2：y


  •  ...

参数类型：polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
.polygon {
   clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
}

clip-path 的一些妙用

.polygon {
   clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

clip-path 的一些妙用

github 项目动画案例

使用 clip-path 制作的动画案例放在了github上

转载自:https://juejin.cn/post/7232119293797335096
评论
请登录