关于html5:clippath

82次阅读

共计 2886 个字符，预计需要花费 8 分钟才能阅读完成。

前言：用 clip-path 能够实现很多酷炫动画成果。比方很出名的 In pieces，该网站用 clip-path 动画绘制了各种珍稀濒危动物，创意弱小。地址为：http://species-in-pieces.com/

应用裁剪形式创立元素的可显示区域。区域内的局部显示，区域外的暗藏。

clip-path: <clip-source> | [<basic-shape> || <geometry-box>] | none 默认值为 none。

<clip-source>：用示意剪切元素的 svg 门路，如：

clip-path: url(resources.svg#c1);

<basic-shape>：应用一些根本的形态函数创立的一个形态，如：

clip-path: inset(10px 5px round 10px); // 矩形，和 SVG 不同的是，矩形用的是 inset 而不是 rect
clip-path: circle(50px at 0 100px); // 圆
clip-path: ellipse(25% 40% at 50% 50%); // 椭圆
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); // 多边形

其中，clip-path: inset()这个矩形属性，和之前的 clip 属性是远亲，然而值的显示却有区别。（之前的 clip 属性总是让我感觉很不迷信，集体认为，新的属性的值比拟合乎惯例 CSS 的属性设定）。
看个示例：

【点击查看 demo】

<geometry-box>：
如果与 <basic-shape>一起申明，它将为根本形态提供相应的参考盒子。通过自定义，它将利用确定的盒子边缘包含任何形态边角（比如说，被 border-radius 定义的剪切门路）。几何体盒子将会有以下的值：

clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box
clip-path: border-box
clip-path: padding-box
clip-path: content-box

这个网站能够生成罕用的门路裁切：【clippy】。

我的项目实战 1 ：
创立群组时，2 人群组须要搁置 2 张用户头像到头像的地位。
设计师要求头像是用户头像居中显示，即两边各裁去 25%，只显示两头的 50%，如图所示。

然而咱们用定位把图片放进去，层级高的一张会遮蔽到另外一张。如图：

这个时候咱们用剪切的办法，把左边的图像裁切掉 25%，就能够完满显示了。

.td-avatar.is-two img:nth-child(2) {
    left: 25%;
    clip-path: polygon(25% 0%, 100% 0, 100% 100%, 25% 100%);
}

我的项目实战 2 ：【悬浮球】

裁切的元素的响应区域将会和显示的区域统一，这就不便咱们用来做很多异形元素的 hover 等操作。例如：

【异形元素 hover】

clip-path 反对缓动动画，先来看一个简略的【例子】：

.clip-box{
  width: 100px;
  height: 100px;
  background: #000;
  &--cicle{animation: cicle 3s linear both infinite;}
}

@keyframes cicle{
  0%{clip-path: circle(0% at 50% 50%);
  }
 30%,100%{clip-path: circle(50% at 50% 50%);
  }
}

留神：clip-path 多边形动画须要 点数保持一致 才会有缓动的成果，否则会僵硬地切换，如下图所示。

我的项目实战：
【已经的流动页】

文章结尾提到的 In pieces 大略实现思路就是，先把动物各个图案用 PS/AI 等绘图工具绘制进去，而后用 clip-path 一一在页面绘制。

先来看一个简略的 demo：

.polygon-div {
  height:300px;
  background:#ccc;
  clip-path: polygon(50% 0%, 41% 70%, 100% 100%);
  transition: .18s cubic-bezier(.7,.3,0,1);
  
  &:hover .polygon-div {
    background: #999;
    clip-path: polygon(19% 20%, 50% 97%, 79% 68%);
  }
}

【点击查看 demo】

那么，多个三角形拼合起来，就失去相似 In pieces 的成果，如下图所示：

步骤：

咱们先在绘图工具把想要绘制的图片用三角形绘制进去，如图所示：

而后再通过量取每个三角形的点的地位，把它们用 clip-path 在页面中绘制进去。

$path1: polygon(224px 150px, 276px 150px, 160px 350px),
  polygon(245px 204px, 200px 350px, 160px 350px),
  polygon(276px 150px, 292px 350px, 247px 200px),
  polygon(276px 150px, 320px 282px, 291px 350px),
  polygon(320px 282px, 340px 350px, 291px 350px),
  polygon(224px 272px, 269px 272px, 280px 309px),
  polygon(224px 272px, 280px 309px, 212px 309px);
  
$path2: polygon(173px 150px, 220px 341px, 174px 350px),
  polygon(173px 151px, 219px 164px, 220px 342px),
  polygon(327px 150px, 282px 163px, 282px 335px),
  polygon(327px 150px, 282px 335px, 328px 266px),
  polygon(328px 266px, 282px 335px, 328px 350px),
  polygon(219px 228px, 282px 267px, 282px 228px),
  polygon(219px 228px, 219px 267px, 282px 266px);

别离给每个三角形背景色赋值：

$bg1: #f8b551, #f19149, #ec6941, #f29b76, #ec6941, #f19149, #ec6941;
$bg2: #53a245, #3cae58, #5ec857, #51c356, #8ad36d, #44af3c, #51c356;

再顺次给他们做动画变形：

@for $i from 1 through 7 {.triangle:nth-child(#{$i}) {background: nth($bg1, $i);
    clip-path: nth($path1, $i);
    transition-delay: #{$i * 0.1}s;
  }
  .box:hover .triangle:nth-child(#{$i}){clip-path: nth($path2, $i);
    background: nth($bg2, $i);
  }
}

最终成果：【demo】

正文完