clip属性

敲打

 

 

今天在一个网站上看到了一个有意思的动画，点我跳转  里面的动画用到了clip属性 

 

clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果，今天还是偶然间才看到这个属性，既然看见了自己不知道，那就不能放她走，我们来具体看下这个属性怎么用

这个属性在CSS2.1中就已经稳稳地存在，其中有四个属性

其中，据说继承inheritIE浏览器是不支持的，所以该属性打酱油的；然后"auto"就是不剪裁之意，除了重置rect的作用外，其也是个酱油副帝；所以真正的大咖就是rect(top right bottom left)，所以，我们只讨论rect(top right bottom left)

rect(top right bottom left)这个属性其实是跟margin属性一样，是按顺时针来设置的，你可以这样想，有一个大大方块，我从上面右面，下面，左边依次咔咔的剪裁，来看个例子

 

rect(30px 200px 200px 20px)

依次从上右下做来剪裁

 

 

注意：clip:rect矩形剪裁只能作用于position:absolute的元素上。

 

clip:rect矩形剪裁的一些应用介绍

 

1. 可用性隐藏
根据上面对top right bottom left的释义，如果left >= right或者bottom <= top，则元素会被完全裁掉而不可见，即“隐藏”。通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的，从而提高了页面的可用性。

例如：

clip: rect(1px 1px 1px 1px); /*left = right, bottom = top*/

或

clip: rect(10px 10px 10px 100px); /*left > right*/

或

clip: rect(100px 10px 10px 10px); /*bottom < top*/

 

 

clip结合hover做一些66的特效

 

在开头，链接跳转的网页中的用clip结合的特效代码我已经整理下来

 

[html] view plain copy
 
  1. <div class="Adv_area">  
  2.       <a href="javascript:void(0)" title="">  
  3.           <div class="Adv_ico">  
  4.               <u class="cl"></u>  
  5.               <u class="cr"></u>  
  6.               <img src="img/pro_ico6b.png" alt="产品优势" style="top: 21px; left:19px; width: 50px; height: 50px;">  
  7.           </div>  
  8.   
  9.       </a>  
  10.   </div>  

css代码

 

 

[css] view plain copy
 
  1. .Adv_area{ max-width: 200px; margin: 0 auto; text-align: center; }  
  2.   
  3.            .Adv_ico{  
  4.                width:90px;  
  5.                height:90px;  
  6.                overflow:hidden;  
  7.                margin:0 0 0 50px;  
  8.                position:relative;                   设置大容器的宽高，并将border设置为100%来达到圆的效果  
  9.                z-index: 99;  
  10.                background: #757575;  
  11.                border: 2px solid #fff;  
  12.                border-radius:100%;  
  13.                -ms-border-radius:100%;  /* IE 9 */  
  14.                -moz-border-radius:100%;     /* Firefox */  
  15.                -webkit-border-radius:100%; /* Safari 和 Chrome */  
  16.                -o-border-radius:100%;   /* Opera */  
  17.            }  
  18.            .Adv_ico u {  
  19.                display: block;  
  20.                position: absolute;  
  21.                z-index: 11;  
  22.                left: -4px;  
  23.                top: -2px;                        将u标签设置为块级元素，并加上动画（标签层级不能高于图片）  
  24.                margin: 0;  
  25.                padding: 0;  
  26.                width: 92px;  
  27.                height: 92px;  
  28.                background: #1161c0;  
  29.                border: 3px solid #fff;  
  30.                border-radius:100%;  
  31.   
  32.                transition: all .5s ease-in-out 0s;  
  33.            }  
  34.            .Adv_ico u.cl { clip:rect(0px, 105px,0, 52px); }  
  35.            .Adv_ico u.cr { clip:rect(105px,52px,105px,0px);}        <span style="color:#ff0000;">用clip处理u便签，以便于实现动画效果     </span>   
  36.            .Adv_ico img{ position: absolute;  z-index: 12;  float: left; overflow: hidden;}  
[css] view plain copy
 
  1. .Adv_area:hover u.cl { clip:rect(0px,105px,105px,52px);}  
  2. .Adv_area:hover u.cr { clip:rect(0px,52px,105px,0px);}        添加hover伪类  


ps:

 

在 HTML 中，<u>元素 已废弃（<u> 元素被用来定义下划线）。

HTML5 中重新定义了 <u> 元素，它定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词

 

也可以结合background-image属性与sprite结合clip来制作动画，来看下张大神的案例http://www.zhangxinxu.com/study/201104/css-rect-img-sprite-png.html

 

最后，本人才疏学浅，用clip属性制作更好的效果各位看官可以试试，有更厉害的发现可以告诉我，小弟在这感激不尽，附上W3C的clip()详解

https://www.w3.org/TR/CSS21/visufx.html#clipping

再见

 

posted @ 2017-11-03 10:18  全服第一坑  阅读(927)  评论(0)  编辑  收藏  举报