首页 专题 H5案例 前端导航 UI框架

clip 和 clip-path

阅读 1120 评论 0
一、Clip
CSS的clip属性并不是CSS3的新属性,而是在CSS2中已经存在了,不过在实际开发中,这个属性的使用率比较低,我之前也是瞄过这个名称,最近看过一个网站的加载动画,才知道其的强大。
下面就一起来学学吧!
Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”。
语法:

clip:<shape> | auto | inherit;

注意:clip属性只能在元素设置了“ position:absolute ”或者“ position:fixed ”属性起作用;如果先有" overflow:visible ",clip属性不起作用。

属性值说明:
  • <shape>:shape是一个函数功能,当前只支持 rect (top, right, bottom, left) 属性。
  • auto:这是一个默认值,表示不进行剪切。
  • inherit:继承父元素的clip属性。

Rect()使用详解
rect有四个值,顺序和margin、padding以及border具有一样的标准,分别是:top,right,bottom,left

clip:rect (top, right, bottom, left)

在这里要提醒一句,rect()属性的top和bottom指定的偏移量是从元素盒子顶部边缘算起的;left和right指定的偏移量是从元素盒子左边边缘算起的,看下图:


简单例子:

.clip{   

  position:absolute;   

  clip:rect(30px,200px,150px,50px);   

}

效果如下:

左侧是原图,右侧是剪切后的图,是不是很神奇咧!
接下来利用clip这个属性来制作一个圆形加载动画:


到这里,clip属性已经介绍完了,请尽情发挥你的想象力,制作出酷炫的效果。

二、clip-path
clip-path是CSS3中的属性,比旧版本的clip更加强大,但它的缺点就是兼容性,ie是完全不支持的,而webkit内核的浏览器,需要加上内核前缀-webkit-

语法:

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

默认值是none。
属性值说明:
  • clip-source: 可以是内、外部的SVG的 <clipPath> 元素的url引用
  • basic-shape:使用基本的形状函数创建的图形形状,如:circle()、ellipse()、inset() 和 polygon()

如果你熟悉svg,那你对下面的属性应该会有一些熟悉。

1.多边形polygon
语法:

clip-path:polygon(x y,x1 y1....,xn yn)

x y :第一个点的x轴值和y轴值,以此类推,xn yn表示第n个点的x轴和y轴值;值可以是百分比或像素值。

2.圆形circle
语法:

clip-path:circle( r at x y)

  • r表示圆的半径
  • x y:原点位置

3.椭圆ellipse
语法:

clip-path:ellipse( r1 r2 at x y)

  • r1:水平半径
  • r2:垂直半径
  • x y:圆心位置

4.inset
语法:

clip-path: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)




简单例子:

.polygon{   

  -webkit-clip-path:polygon(0 100%, 50% 0, 100% 100%);   

}   

.circle{   

  -webkit-clip-path: circle(20% at 50% 50%);   

}   

.ellipse{   

  -webkit-clip-path: ellipse(30% 20% at 50% 50%);   

}   

.inset{   

  -webkit-clip-path: inset(25% 0 round 0 25%);   

}

效果如下:




到这里,并没有完,更加酷炫的效果,当然是配合上svg

.text {   

  -webkit-clip-path: url(#svgTextPath);   

  clip-path: url(#svgTextPath); }

svg:

<svg height="0" width="0">   

  <defs>   

    <clipPath id="svgTextPath">   

      <text x="10" y="250" textLength="200px" lengthAdjust="spacing" font-family="Vollkorn" font-size="50px" font-weight="700" font-style="italic"> 酷炫 </text>   

    </clipPath>   

  </defs>   

</svg>

效果如下:



后续学习会继续添加资料,如果您有更好的资料,欢迎在评论区提供!


关注”全栈技术杂货铺“

全栈技术杂货铺