CSS3 clip-path 用法介绍

1、基本概念

刷新 QQ 空间动态时，发现一则广告，随着用户上下滑动动态列表，就会自动切换广告图片，这样的效果对移动端本就不大的屏幕来讲，无疑是很精妙的考虑，这样的效果是怎么实现的呢？

你能够点击这里：QQ空间广告示意demo

接下来就说说这个效果的具体实现思路：

1. 将两张图片经过定位，相对于图片容器堆叠在一块儿；
2. 在图片容器的左上角或右下角选取一个圆心，绘制一个圆，不断加大圆的半径来显示第二张图片；
3. 上划下拉时，根据滑动速度动态改变圆的半径；
4. 当图片容器距屏幕顶部或底部的距离为 0 时，则相应的改变图片堆叠顺序及圆心位置。

在图片上绘制圆，为何就能显示出第二张图片呢？说到这里，就不得不说一下我们今天的主角 clip-path，引用 MDN 上的描述：

clip-path属性能够建立一个只有元素的部分区域能够显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者做为一个形状例如circle().。clip-path属性代替了如今已经弃用的剪切 clip属性。

clip-path 的含义就是裁剪路径，经过指定的闭合路径或者形状，甚至是 SVG 中 clipPath 标签订义的形状，裁剪出部分须要保留的区域，这样网页中的布局实现能够是多种多样的。

在 clip-path 出现以前，CSS2.1 中的 clip 属性也有裁剪的效果，可是它只支持矩形，并且只对 position:absolute 或者 position:fixed 的元素生效，使用方式以下：

clip: rect(60px, 60px, 60px, 60px); // 标准写法
clip: rect(60px  60px  60px  60px); // 兼容 ie 及 火狐浏览器
复制代码

注意: rect 参数的顺序为 top、right、botton、left

全部主流浏览器都支持 clip 属性，在雪碧图（ CSS Sprite ）的展现仍然有它的用武之地，可是因为 clip 属性的局限性， clip 已经被 clip-path 代替。日常开发中咱们可使用 border、border-radius 等属性制做三角形、圆或圆角矩形等简单图案，clip-path 为咱们提供了更多的可能，结合 SVG 的 path、animate 等标签能够制做更多的有趣的图案。

2、用法实践

clip-path 属性能够裁剪出不少图形，circle、ellipse、polygon、inset，同时也可使用动画和 SVG 的 clipPath 标签。

• 圆 circle

clip-path: circle(25% at 50% 50%);
复制代码

• 椭圆 ellipse

clip-path: ellipse(25% 25% at 50% 50%);
复制代码

• inset

clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%);
复制代码

• 多边形 polygon

clip-path: polygon(50% 0, 25% 50% ,75% 50%);
复制代码

你能够点击这里：clip-path示意demo

• url

<section class="container">
  <img src="img01.jpg" class="contract">
  <img src="img02.jpg">
</section>
<svg height="0" width="0">
  <clipPath id="clip02">
    <circle cx="400" cy="210" r="0">
      <animate
        attributeType="CSS"
        attributeName="r"
        values="0;480;0"
        dur="9s"
        repeatCount="2"
      />
    </circle>
  </clipPath>
</svg>
复制代码

.contract {
  clip-path: url(#clip02);
  z-index:1;
}
复制代码

值得说明的是使用 SVG 的 clipPath 标签能够包裹 animate，其中 animate 标签的 attributeName 是指设置圆的半径，values 能够设置动画的帧，能够有多个值用分号分割，dur 是指动画的持续时间，repeatCount 是指动画的次数。

兼容性

目前 IE 和 Edge 都不支持这个属性。Firefox 仅部分支持 clip-path，部分支持是指只支持形状和 URL(#path) 内联SVG的语法。Chrome、Safari 和 Opera 须要使用 -webkit- 的前缀兼容此属性。不支持外部的 SVG 形状。更多兼容信息能够点击这里查看 clip-path 浏览器兼容状况。

3、经验总结

使用 URL(#path) 内联SVG 的方式，咱们能够很轻易的裁剪出复杂的形状，也可以包含一些形象生动的动画效果，好比在扑克游戏出牌下注的倒计时上添加扇形遮罩，或是在矩形边缘添加倒计时进度，加载中的动画等等，都可以使用clip-path 属性巧妙的实现，同时在使用 clip-path 属性能够裁剪图形时能够灵活的使用相对单位。

4、参考连接

• clip-path

• species-in-pieces

• CSS3/SVG clip-path路径剪裁遮罩属性简介

  ---

  关注微信公众号：创宇前端（KnownsecFED），码上获取更多优质干货！