阅读 711

每天一个小技巧:CSS clip-path 的妙用

logo

CSS 的 clip-path 属性是 clip 属性的升级版,它们的作用都是对元素进行 “剪裁”,不同的是 clip 只能作用于 positionabsolutefixed 的元素且剪裁区域只能是正方形,而 clip-path 更加强大,可以以任意形状去裁剪元素,且对元素的定位方式没有要求。基于这样的特性,clip-path 常用于实现一些炫酷的动画效果。

比如:

视差广告效果:

parallax

实现请参考:CodePen

菜单栏弹出效果:

menus

实现请参考:CodePen

Clip Path分类

clip-path 有几大类,分别为:

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

  • clip-source: 通过 url() 方法引用一段 SVG 的 <clipPath> 来作为剪裁路径

  • geometry-box: 单独使用时会将指定框的边缘作为剪裁路径,或者配合 basic-shape 使用,用于定义剪裁的参考框(Reference Box)(由于该属性浏览器支持度比较低,本文暂不讨论)

一、Basic Shape

1. Inset

inset() 用于定义一个插进的矩形,即被剪裁元素内部的一块矩形区域。

参数类型:inset( <shape-arg>{1,4} [round <border-radius>]? )

其中 shape-arg 分别为矩形的上右下左顶点到被剪裁元素边缘的距离(和marginpadding参数类似),border-radius 为可选参数,用于定义 border 的圆角。

DEMO:

html:

<img class="img inset" src="http://source.unsplash.com/random/1000x1000" />
复制代码

css:

.inset {
  clip-path: inset(0);

  &:active {
    clip-path: inset(100px 200px 10% 20% round 20px);
  }
}
复制代码

inset

2. Circle

circle() 用于定义一个圆。

参数类型:circle( [<shape-radius>]? [at <position>]? )

其中 shape-radius 为圆形的半径,position 为圆心的位置。

如果 shape-radius 为百分比,则 100% 相当于:

sqrt(width^2+height^2)/sqrt(2)
复制代码

widthheight分别为被剪裁元素的宽高。

DEMO:

html:

<img class="img circle" src="http://source.unsplash.com/random/1000x1000" />
复制代码

css:

.circle {
  clip-path: circle(100px at center);

  &:hover {
    clip-path: circle(50% at center);
  }
}
复制代码

circle

3. Ellipse

ellipse() 用于定义一个椭圆。

参数类型:ellipse( [<shape-radius>{2}]? [at <position>]? )

其中 shape-radius 为椭圆x、y轴的半径,position 为椭圆中心的位置。

DEMO:

html:

<h2>Ellipse (click)</h2>
<div class="img-box">
  <img class="img ellipse" src="http://source.unsplash.com/random/1000x1000" />
</div>
复制代码

css:

.ellipse {
  clip-path: ellipse(200px 500px at 50% 50%);

  &:active {
    clip-path: ellipse(500px 500px at 50% 50%);
  }
}
复制代码

ellipse

4. Polygon

polygon() 用于定义一个多边形。

参数类型:polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

其中 fill-rule 为填充规则,即通过一系列点去定义多边形的边界。

DEMO:

html:

<img class="img polygon" src="http://source.unsplash.com/random/1000x1000" />
复制代码

css:

.polygon {
  clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);

  &:active {
    transform: rotate(720deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
复制代码

polygon

二、Clip Source

即通过引用一个svg的 clipPath 元素来作为剪裁路径。比如,使用在 <clipPath> 中定义一个圆:

html:

<svg>
  <defs>
    <clipPath id="svgCircle">
      <circle cx="500" cy="500" r="400" />
    </clipPath>
  </defs>
</svg>

<img class="img svg-circle" src="http://source.unsplash.com/random/1000x1000" />
复制代码

css:

.svg-circle {
  clip-path: url("#svgCircle");
}
复制代码

效果:

svg clipPath

Clippy

如果觉得自己去计算和绘制一个图形太麻烦,可以使用 clippy 这个在线 clip-path 绘制工具,里面包含了大部分常用的图形,也支持可视化绘制自定义图形。

Clippy:

clippy

每天一个小技巧(Tricks by Day),量变引起质变,希望你和我一起每天多学一点,让技术有趣一点。

所有示例将会汇总到我的 tricks-by-day github 项目中,欢迎大家莅临指导 😊