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前是半径后是圆心坐标)

   .circle{
width:100px;
height:100px;
background:#0cc;
-webkit-clip-path:circle(50% at 50% 50%);
}

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

 .ellipse{
width:100px;
height:100px;
background:#aaa;
-webkit-clip-path:ellipse(25% 50% at 50% 50%);
}

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

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

4,正三角形

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

5,正五变形(正多边形对应的是一个一个的点,后面同)

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

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,正八边形

  .f{
width:242px;
height:242px;
background:#f69;
-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%);
}

9,五角星

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

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

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

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clip-path</title>
<style>
.container{width: 400px; height: 400px; margin: 200px auto;animation:a 15s infinite linear alternate;-webkit-animation:a 15s infinite linear alternate;}
.clipPath{ width: 100%;height: 100%;animation:a 5s infinite linear alternate;-webki}
@-webkit-keyframes a{
0%{-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100% ,69% 59%, 82% 100%, 69% 59%, 82% 100%, 69% 59%, 82% 100%);}
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%);}
40%{-webkit-clip-path: polygon(50% 0%, 63% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);}
60%{-webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 0% 38%, 37% 38%);}
80%{-webkit-clip-path: polygon(63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);}
90%{-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 69% 59%, 82% 100%, 69% 59%, 82% 100%, 69% 59%, 82% 100%);}
}
.clipPath img{width: 100%;height: 100%;}
</style>
</head>
<body>
<div class="container">
<div class="clipPath"><img src="img/1.jpg" alt=""></div>
</div>
</body>
</html>

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

css3的clip-path属性的更多相关文章

  1. CSS3 新增的文本属性

    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  2. CSS3:不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  3. CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。

    CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...

  4. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

  5. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  6. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  7. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  8. CSS3:布局display属性的flex(弹性布局)

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  9. 使用CAShapeLayer的path属性与UIBezierPath画出扫描框

    1.CAShapeLayer CAShapeLayer具有path属性,(是CGPath对象),可以使用这个属性与UIBezierPath画出想要的图形.该子类根据其fill color和stroke ...

  10. CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性。

    CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性. CSS3 Generator ...

随机推荐

  1. Mac 學習系列之Python Challenge 11-20

    11.给你一个正整数列表 L, 如 L=[2,8,3,50], 输出L内全部数字的乘积末尾0的个数, 如例子L的结果为2.(提示:不要直接相乘,数字非常多,可能溢出) Answer: n_2 = 0 ...

  2. 多线程-Fork/Join

    Fork/Join Java7提供了Fork/Join来支持将一个任务拆分成多个“小任务”并行计算,再把多个“小任务”的结果合并成总的计算结果. 类图 Java7提供了ForkJoinPool来支持将 ...

  3. [css]后台管理系统布局

    知识点: 绝对定位+overflowhidden 整体思路 三大块 pg-header---需要固定 (height:48px) pg-content menu 右侧菜单-需要固定(width:200 ...

  4. C++父子类继承时的隐藏、覆盖、重载

    存在父子类继承关系时,若有同名成员函数同时存在,会发生隐藏.覆盖和重载这几种情况.对于初学者也比较容易混淆,为此,我整理了一下我的个人看法,仅供参考.希望对大家理解有帮助,也欢迎指正. 1.父子类继承 ...

  5. C#遍历计算机上所有的文件

    class Program { static List<string> allFileName=new List<string>(); static void Main(str ...

  6. 微信小程度腾讯地图SDK使用方法

    在开发过程中,不少人肯定遇到过要用到地图,那么在小程序里,腾讯也给出了相应的SDK供我们来使用.那么接下来,就介绍下如何使用该SDK实现获取经纬度然后显示当前用户所在地址 首先第一步:下载腾讯地图SD ...

  7. 安全DNS

    国内首家云安全DNS:(114DNS)114.114.114.114114.114.115.115 将 DNS 地址设为114.114.114.119 和 114.114.115.119 ,拦截钓鱼病 ...

  8. jsp tag 直接文件实现

    引入 <%@ taglib prefix="sys" tagdir="/WEB-INF/tags/sys" %> 这里注意/WEB-INF/tags ...

  9. Qt之模式、非模式对话框

    关于“模式”和“非模式”对话框,相信大家都比较熟悉,但其中有一个可能很多人都比较陌生,介于两者之间的状态,我们称之为“半模式“. 模式对话框 描述 阻塞同一应用程序中其它可视窗口输入的对话框.模式对话 ...

  10. C# mvc中动态压缩文件发送给前端

    前言 帮朋友解决一个C#中发送压缩文件的的问题,因为感觉解释起来更麻烦,就直接用几分钟时间写了个小Demo.本着"走过路过"不错过的原则,也给记录一下. 1.前端代码 非常简单的一 ...