css3的clip-path属性

网上看到的都是因为2年前一个出名的网站引发了对该属性的研究。所以大概是2年前火了一阵子的属性。2016-09-10 23:54:00

直接开始总结它的用法：

2个基本概念：

clip-path:直译就是裁剪路劲。在我总结中过程来看，它是在一个矩形的基础上进行的裁剪。如果不懂，后面看代码你就知道是什么意思。

第一个概念:裁剪路劲，它是我们用来裁剪元素的路劲，它标记了我们需要裁剪的区域。

第二个概念：裁剪区域，是裁剪路劲闭合后所包含的全部区域。

裁剪区域以外的部分包括背景,内容,border,text-shadow都被裁剪点并且不会接受到hover,click等事件。

clip-path语法:

 clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

其默认值是 none 。另外简单介绍 clip-path 几个属性值：

clip-source : 可以是内、外部的SVG的 <clipPath> 元素的URL引用
basic-shape : 使用一些基本的形状函数创建的一个形状。主要包括 circle() 、 ellipse() 、 inset() 和 polygon() 。
geometry-box : 是可选参数。此参数和 basic-shape 函数一起使用时，可以为 basic-shape 的裁剪工作提供参考盒子。如果 geometry-box 由自身指定，那么它会使用指定盒子形状作为裁剪的路径，包括任何(由 border-radius 提供的)的角的形状。

在开始使用clip-path绘制图形，或者说裁剪图形之前，有两点需要大家注意：

使用clip-path要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续线段，若线段彼此有交集，裁剪区域就会有相减的情况发生，当然如果你特意需要这样的效果除外。
如果绘制时采用比例的方式绘制，长宽就必须要先行设定，不然有可能绘制出来的长宽和我们想像的就会有差距，使用像素绘制就不会有这样的现象。

1,裁剪圆形circle(at前是半径后是圆心坐标)

1   .circle{
2     width:100px;
3     height:100px;
4     background:#0cc;
5     -webkit-clip-path:circle(50% at 50% 50%);
6   }

2,椭圆ellipse（25%是x半径 50%是y轴半径 at后面是椭圆圆心）

1 .ellipse{
2     width:100px;
3     height:100px;
4     background:#aaa;
5     -webkit-clip-path:ellipse(25% 50% at 50% 50%);
6   }

3,內置矩形 inset( 上右下左的邊距 round 上右下左圓角 )

 .inset{
    width:100px;
    height:100px;
    background:#99f;
    -webkit-clip-path:inset(10px 20px 30px 10px round 20px 5px 50px 0);
  }

4，正三角形

1  .a{
2     width:100px;
3     height:87px;
4     background:#c00;
5     -webkit-clip-path:polygon(0% 100%, 50%  0%,100% 100%);
6   }

5,正五变形（正多边形对应的是一个一个的点，后面同）

1   .c{
2     width:162px;
3     height:154px;
4     background:#095;
5     -webkit-clip-path:polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
6   }

6，正六边行

.d{
    width:200px;
    height:174px;
    background:#f80;
    -webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  }

7，正七边行

  .e{
    width:224px;
    height:218px;
    background:#09c;
    -webkit-clip-path:polygon(50% 0%, 90.18% 19.72%,100% 64.22%,72.32% 100%,27.68% 100%,0% 64.22%,10.09% 19.72%);
  }

8，正八边形

1  .f{
2     width:242px;
3     height:242px;
4     background:#f69;
5     -webkit-clip-path:polygon(29.34% 0%, 70.66% 0%,100% 29.34%,100% 70.66%,70.66% 100%,29.34% 100%,0% 70.66%,0% 29.34%);
6   }

9，五角星

1 .clipClass {
2  width:141px;
3  height:241px;
4   -webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
5 }

说这么多是为了自己以后若要用可以直接拿来用，另外这里还有一个clip-path工具供使用！！点击这里！

最后是clip-path结合animation的动画:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>clip-path</title>
 6     <style>
 7       .container{width: 400px; height: 400px; margin: 200px auto;animation:a 15s infinite linear alternate;-webkit-animation:a 15s infinite linear alternate;}
 8       .clipPath{ width: 100%;height: 100%;animation:a 5s infinite linear alternate;-webki}
 9       @-webkit-keyframes a{
10           0%{-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100% ,69% 59%, 82% 100%, 69% 59%, 82% 100%, 69% 59%, 82% 100%);}
11           10%{-webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);}
12           40%{-webkit-clip-path: polygon(50% 0%, 63% 38%,  69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);}
13           60%{-webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%,  0% 38%, 37% 38%);}
14           80%{-webkit-clip-path: polygon(63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);}
15           90%{-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 69% 59%, 82% 100%, 69% 59%, 82% 100%, 69% 59%, 82% 100%);}
16       }
17       .clipPath img{width: 100%;height: 100%;}    
18     </style>
19 </head>
20 <body>
21     <div class="container">
22         <div class="clipPath"><img src="img/1.jpg" alt=""></div>
23     </div>
24 </body>
25 </html>

这里有一个网友做的炫酷的动画值得一看，点这里！！必须在webkit的内核浏览器下看！！

posted @ 2016-09-08 23:12 Mine&&Mine 阅读(576) 评论(0) 编辑收藏举报

刷新页面返回顶部

Mine&&Mine

css3的clip-path属性