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. erlang supervisor simple_one_for_one实例

    simple_one_for_one vs one_for_one: 相同点: 这种Restart Strategy和one_for_one基本相同(即当一个child process挂掉后,仅仅重启 ...

  2. myeclipce怎么破解

    MyEclipse安装文件下载,下载地址 http://www.jb51.net/softs/150886.html 你也可以进入官方网站下载:http://www.myeclipsecn.com/d ...

  3. Oracle 错误 maximum number of processes(150) exceeded 解决办法

    网上很多同行应该都遇到过这个问题,百度一搜 千篇一律的处理办法,就是加大进程数. 但是我这边情况不一样,因为我的Oracle 11g是早上刚装的,跟本没人用,我用PLSQL链接照样说不能链接. 我就在 ...

  4. 1年3年5年-我对PHP攻城师有看法

    今天早上公车上看微信拉勾的一些岗位推送,挑了几个PHP攻城师看看 15K-20K的 百万级网站架构经验 3年以上开发,至少1年互联网用户产品开团队开发经验 不低于百度T4水平 数据库规划和优化,熟悉常 ...

  5. 理解Callable 和 Spring DeferredResult（翻译）

    1-介绍 Servlet 3中的异步支持为在另一个线程中处理HTTP请求提供了可能性.当有一个长时间运行的任务时,这是特别有趣的,因为当另一个线程处理这个请求时,容器线程被释放,并且可以继续为其他请求 ...

  6. 排查PHP-FPM占用CPU过高

    发现 如何发现的呢?当然是使用top命令,发现系统的load average>3,这说明系统已经处于比较高的负载中. 尝试解决 当我把php-fpm重启后,没过一会儿又开始cpu狂飙!这是什么鬼 ...

  7. 最纯粹的直播技术实战02-Camera的处理以及推流

    最纯粹的直播技术实战02-Camera的处理以及推流 最新实战教程.Android自己主动化刷量.作弊与防作弊.案例:刷友盟统计.批量注冊苹果帐号 这个系列的文章将会研究最纯粹的Android直播的实 ...

  8. linux查杀病毒的几个思路

    1.  tmp 目录下面 2. 定时任务查找一下 crontab -e 3. 病毒要下载 ps -ef|egrep "curl|wget"  查看是否有下载的命令 4. top 一 ...

  9. 再来一个expect脚本

    [root@jenkins scripts]# cat expect_test1205.sh #!/usr/bin/expect ################################### ...

  10. Java 使用 HttpClient调用https 最新源码 JDK7+ apache4.3+

    在项目使用https方式调用别人服务的时候,以前要写很多的代码,现在框架封装了很多,所以不用再写那么多了. 网上看了一下,都是很老的版本,用过时的DefaultHttpClient. 以spring为 ...