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的内核浏览器下看!!