CSS clip:rect矩形剪裁功能及一些应用介绍
来源:互联网 发布:淘宝店铺美工重要吗 编辑:程序博客网 时间:2024/06/08 08:39
今天在一个网站上看到了一个有意思的动画,点我跳转 里面的动画用到了clip属性
clip
,为修剪,剪裁之意。配合其属性关键字rect
可以实现元素的矩形裁剪效果,今天还是偶然间才看到这个属性,既然看见了自己不知道,那就不能放她走,我们来具体看下这个属性怎么用
这个属性在CSS2.1中就已经稳稳地存在,其中有四个属性
其中,据说继承inherit
IE浏览器是不支持的,所以该属性打酱油的;然后"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结合的特效代码我已经整理下来
<div class="Adv_area"> <a href="javascript:void(0)" title=""> <div class="Adv_ico"> <u class="cl"></u> <u class="cr"></u> <img src="img/pro_ico6b.png" alt="产品优势" style="top: 21px; left:19px; width: 50px; height: 50px;"> </div> </a> </div>css代码
.Adv_area{ max-width: 200px; margin: 0 auto; text-align: center; } .Adv_ico{ width:90px; height:90px; overflow:hidden; margin:0 0 0 50px; position:relative; 设置大容器的宽高,并将border设置为100%来达到圆的效果 z-index: 99; background: #757575; border: 2px solid #fff; border-radius:100%; -ms-border-radius:100%;/* IE 9 */ -moz-border-radius:100%; /* Firefox */ -webkit-border-radius:100%; /* Safari 和 Chrome */ -o-border-radius:100%; /* Opera */ } .Adv_ico u { display: block; position: absolute; z-index: 11; left: -4px; top: -2px; 将u标签设置为块级元素,并加上动画(标签层级不能高于图片) margin: 0; padding: 0; width: 92px; height: 92px; background: #1161c0; border: 3px solid #fff; border-radius:100%; transition: all .5s ease-in-out 0s; } .Adv_ico u.cl { clip:rect(0px, 105px,0, 52px); } .Adv_ico u.cr { clip:rect(105px,52px,105px,0px);} 用clip处理u便签,以便于实现动画效果 .Adv_ico img{ position: absolute; z-index: 12; float: left; overflow: hidden;}
.Adv_area:hover u.cl { clip:rect(0px,105px,105px,52px);} .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
- CSS clip:rect矩形剪裁功能及一些应用介绍
- CSS clip:rect矩形剪裁功能及一些应用介绍
- clip: rect() -- 矩形剪裁功能介绍
- CSS clip:rect用法
- clip:rect / turn 介绍
- css{clip:rect}好玩的属性
- CSS clip元素 rect属性中各个数字的含义
- css中的clip属性rect(top,right,bottom,left);
- Rect 矩形
- unity3D学习【功能实现】之十:关卡制作scroll rect应用以及一些代码
- DVBlast功能介绍及应用
- css中的clip:rect() 只能在绝对定位的元素上使用
- css rect
- clip介绍
- 画矩形 RECT FillRect
- bzoj1259: [CQOI2007]矩形rect
- 1259: [CQOI2007]矩形rect
- Unity3d--矩形Rect
- 基于窗口的实时统计
- struts2概述
- js 加载缓慢,按钮触发报:XXXX 方法找不到
- Linux shell编程学习笔记(十) 进程
- RabbitMQ安装及使用
- CSS clip:rect矩形剪裁功能及一些应用介绍
- moni
- Effect(四)—— AbsorbEffect
- CodeForces 445B DZY Loves Chemistry
- intellij idea部署web项目时的位置(Tomcat)
- windows 10 上安装 Oracle11g的注意事项
- Struts2入门案例,自动装配
- JSPatch 怎样生成私钥和公钥
- PHP网站模拟登陆