前言：使用clip-path可以实现很多炫酷的动画效果。比如大家熟知的Inpieces，网站使用clip-path动画绘制了各种珍稀濒危动物，非常有创意。地址为：http://species-in-pieces.com/定义裁剪创建的元素的可显示区域。区域内的部分显示，区域外的部分隐藏。语法clip-path:|[<基本形状>||<几何框>]|无默认为无。：使用表示剪辑元素的svg路径，如：clip-path:url(resources.svg#c1);：使用一些基本的形状函数创建一个形状，如：clip-path:inset(10px5pxround10px);//矩形，与SVG不同，矩形使用inset而不是rectclip-path:circle(50pxat0100px);//Circleclip-path:ellipse(25%40%at50%50%);//椭圆裁剪路径：polygon(50%0%,100%50%,50%100%,0%50%);//Polygon,clip-path:inset()这个矩形属性和前面的clip属性比较接近，只是值显示不同。（之前的clip属性总让我觉得很不科学，个人认为新属性的取值更符合常规CSS的属性设置）。看例子：[点击查看演示]：如果和一起声明，会为基本形状提供相应的参考框。通过自定义，它将利用定义的框边缘，包括任何形状的角（例如，由border-radius定义的剪切路径）。几何框将具有以下值：clip-path:fill-box;剪辑路径：描边框；剪辑路径：视图框；clip-path:margin-boxclip-path:border-boxclip-path:padding-boxclip-path:content-box本站可以生成通用路径裁剪：【clippy】。项目实战1：创建群组时，2人群组需要在头像位置放置2个用户头像。设计者要求头像显示在用户头像的中央，即每边切掉25%，只显示中间的50%，如图。但是我们用定位的方式把图片放进去，级别高的会覆盖另外一个。如图：这时候我们使用裁剪的方式，将右侧图片裁掉25%，就可以完美显示了。.td-avatar.is-twoimg:nth-child(2){左：25%；clip-path:polygon(25%0%,100%0,100%100%,25%100%);}item实战2：【浮球】Clip-pathResponseArea被裁剪元素的响应区域会和显示区域保持一致，方便我们做很多异形元素的悬停等操作。例如：【异形元素悬停】clip-path动画clip-path支持缓动动画，先看一个简单的【例子】：.clip-box{width:100px;高度：100px；背景：#000；&--cicle{animation:cicle3slinearbothinfinite;}}@keyframescicle{0%{clip-path:circle(0%at50%50%);}30%,100%{剪辑路径：圆（50%50%50%）；}}注意：clip-path多边形动画需要保持一致才能有缓动效果，否则会突然切换，如下图。项目实战：【原创活动页】文章开头提到的Inpieces的大致思路是先用PS/AI等绘图工具画出各种动物图案，然后使用clip-path将它们一张一张地画在页面上。先来看一个简单的demo：.polygon-div{height:300px;背景：#ccc;剪辑路径：多边形（50%0%，41%70%，100%100%）；过渡：.18s立方贝塞尔(.7,.3,0,1)；&:hover.polygon-div{背景：#999;剪辑路径：多边形（19%20%、50%97%、79%68%）；}}【点击查看演示】然后，将多个三角形放在一起，得到一个类似Inpieces的效果，如下图：步骤：我们先用绘图工具画出我们要用三角形画的图，如图：Then然后通过测量每个三角形的点的位置，用clip-path绘制在页面上。$PATH1：Polyon（224px150px，276px150px，160px350px），Polygon（245PX204PX，200PX350PX，160PX350PX），Polygon（Polygon）（276px150px，292px350px，292px350px，242Ppx2000px），276PPOX，276，276，276，276，276，276，276，276，276，276，276，276，276，276，276，（276）,多边形(320px282px,340px350px,291px350px),多边形(224px272px,269px272px,280px309px),多边形(224px272px,280px309px,212px309px);$path2:polygon(173px150px,220px341px,174px350px),polygon(173px151px,219px164px,220px342px),polygon(327px150px,282px163px,282px335px),polygon(327px150px,282px335px,328px266px),多边形(328px266px,282px335px,328px350px),多边形(219px228px,282px267px,282px228px),多边形(219px228px,219px267px,282px266px);分别为每个三角形分配背景色：$bg1:#f8b551,#f19149,#61,#fec6947,#f19149,#6,#fec69b9,,#f19149,#ec6941;$bg2：#53a245、#3cae58、#5ec857、#51c356、#8ad36d、#44af3c、#51c356；然后将它们一个接一个地制作动画：@for$ifrom1through7{.triangle:nth-child(#{$i}){background:nth($bg1,$i);快拍h:nth($path1,$i);转换延迟：#{$i*0.1}s；}.box:hover.triangle:nth-child(#{$i}){剪辑路径：nth($path2,$i);背景:nth($bg2,$i);}}最终效果：【demo】
