前端技巧理解和学习CSS裁剪属性(clip)的用法

理解和学习CSS裁剪属性(clip)的用法

英文单词Clip的意思是修剪或裁剪,在CSS里这个词并不陌生,比如“text-overflow:clip”这个定义表示对多余的文本进行裁剪,比如“background-clip”属性可以设置背景的绘制区域,此外还可以通过clip属性来剪裁设置了绝对定位的元素,本文简单的了解一下clip属性的用法。

在CSS里,clip属性只在元素设置了“position:absolute”或者“position:fixed”属性时起作用,对一个元素进行裁剪的定义方法是:

div {clip:rect(<top>,<right>,<bottom>,<left>);}

这里的4个值分别表示上右下左四个方向的裁剪距离,可以定义为具体的数值或auto,可以是负值,但不能使用百分比。注意这里设置的四个裁剪值不是分别参考元素的四个边来裁剪,而<top>和<bottom>偏移量是从元素顶部边缘计算,<left>和<right>偏移量是从元素左边边缘计算,裁剪时包括元素边框的尺寸。下面拿一张图片为例,来测试一下这个裁剪属性的规则:

CSS-clip属性.png

我给这个图片设置一个绝对定位属性,并设置右边和底边的裁剪值:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style>
img {position:absolute;clip:rect(0,200px,100px,0);}
</style>
</head>
<body>
<div id="study">
<img alt="test" src="clip.png" />
</div>
</body>
</html>

此时得到的裁剪后的图片如下:

CSS-clip属性.png

这里右边裁剪值200px是参考图片的左边来裁剪的,底边的裁剪值100px是参考顶边来裁剪的,裁剪的范围如下图所示:

clip2.png

下面来试试利用clip属性来完成一个简单的动画,这里我准备了一张宽600px高310px的图片:

a1.jpg

图片中有三个美女,分别占据图片宽度的三分之一,首先来定义一个动画:

@keyframes photo {
0%,100% {clip:rect(auto,200px,auto,auto);}
33.3% {clip:rect(auto,400px,auto,200px);}
66.6% {clip:rect(auto,auto,auto,400px);}
}

然后给图片运用这个动画:

img {position:absolute;animation:photo 2s steps(1,start) infinite;}

此时所展示的效果如下,三个美女依次出现在原本的位置:

clip图片动画1.gif

接下来我通过2D变换属性给第二和第三个美女的位置做一点偏移,也就是:

@keyframes photo {
0%,100% {clip:rect(auto,200px,auto,auto);}
33.3% {clip:rect(auto,400px,auto,200px);transform:translate(-200px,0);}
66.6% {clip:rect(auto,auto,auto,400px);transform:translate(-400px,0);}
}

此时,当第二和第三个美女出现的时候,也会在第一个美女的位置显示,效果如下:

clip图片动画2.gif

此时的就像一张宽200px高310px的GIF图片一样,在CSS背景属性(background)里经常会用到CSS图片精灵,它将多个图片放在一个图片内,通过背景定位的方式获取所需要的部分,而本文所说的clip属性也正好有相似的地方,通过该属性,也完全可以在一张“大图片”内取自己需要的部分。

美女看的过瘾了,我再送上一张美腿女神给您鉴赏一下,为了偷懒方便,这张图我也处理成宽600px高310的尺寸:

a2.jpg

接下来再来做个小小的示例感受clip属性带来的乐趣,html代码部分很简单,就是上面这张图:

<div id="study"><img alt="test" src="a2.jpg" /></div>

首先给外面的包裹层定义一个尺寸,给美女图片加上一个骚粉的边框衬托她的气质:

#study {position:relative;width:600px;height:310px;}
img {border:5px solid #f0c;}

接着给包裹层加上一个伪元素,通过定位使伪元素的尺寸与父元素重合:

#study:before {
content:" ";
position:absolute;left:0;top:0;
width:600px;height:310px;
border:5px solid #80a;
}

这里给这个伪元素也加了5px的边框,刚好把上面图片的边框给盖住了,既然盖住了,就得想办法将之前的骚粉边框给显现出来,clip属性马上登场了:

@keyframes photo {
0%,100% {clip:rect(0,305px,5px,0);}
12.5% {clip:rect(0,5px,160px,0);}
25% {clip:rect(160px,5px,320px,0);}
37.5% {clip:rect(315px,305px,320px,0);}
50% {clip:rect(315px,615px,320px,305px);}
62.5% {clip:rect(160px,620px,320px,605px);}
75% {clip:rect(0,620px,160px,605px);}
87.5% {clip:rect(0,620px,5px,305px);}
}

这里定义一个动画,共分8个步骤,通过clip属性每次只显示上述伪元素边框的一部分,这8个部分的示意图如下:

clip属性裁剪边框.png

下面给刚才的伪元素使用这个动画并设置速度曲线相等及循环播放,看看会是想象中的效果吗:

#study:before {
animation:photo 2s linear infinite;
}

clip图片动画3.gif

效果还算满意,美女的骚粉边框之外实现了一个小小的动画效果,clip属性的使命基本完成了,接下来打铁趁热,再继续玩玩图片的边框吧,原本的骚粉边框可以去掉了,下面来做个边框变换颜色的动画:

@keyframes bordercolor {
0%,100% {border:5px solid #f0c;}
25% {border:5px solid #ecc;}
50% {border:5px solid #9dc;}
75% {border:5px solid #ff0;}
}

给图片加上这个动画,然后看看整体的页面效果是什么:

img {animation:bordercolor 4s linear infinite;}

图片边框动画.gif

总体来说,这个边框已经够酷炫了,还可以将刚才定义的动画的相关属性(比如时长,反向播放,逐帧播放等)修改一下,看看有没有什么不一样的效果,这里就不再演示了,关于动画的效果属性请点这里参考……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/139.html