1、首先要認(rèn)識一下clip 屬性：
定義和用法
clip 屬性剪裁絕對定位元素。
當(dāng)一幅圖像的尺寸大于包含它的元素時(shí)會發(fā)生什么呢？默認(rèn)情況下作為被包含的圖像元素會益處其父元素。如下圖所示：
圖片益處效果預(yù)覽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
height: 200px;
width: 200px;
border: 5px solid red;
margin: 50px auto;
}
.box img{
opacity: 0.5;/*圖片半透明，這樣可以看到父元素邊框，子元素圖像益處效果*/
}
</style>
</head>
<body>
<div class="box">
<img src="images/timg1.jpg" >
</div>
</body>
</html>
"clip" 屬性允許您規(guī)定一個(gè)元素的可見尺寸，這樣此元素就會被修剪并顯示為這個(gè)形狀。
說明：這個(gè)屬性用于定義一個(gè)剪裁矩形。對于一個(gè)絕對定義元素，在這個(gè)矩形內(nèi)的內(nèi)容才可見。出了這個(gè)剪裁區(qū)域的內(nèi)容會根據(jù) overflow 的值來處理。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能比內(nèi)容區(qū)小。
clip 原理說明圖
clip 小demo說明其作用和使用技巧
clip:rect(0, 300px, 100px, 50px);
裁切說明（四個(gè)值的含義）:
第一個(gè)值：上邊起始的距離為0px(從頂部0像素開始)；
第二個(gè)值：自左道右的距離300px(截取的寬度), ；
第三個(gè)值：自上到下的距離為100px (截取的高度)；
第四個(gè)值：左邊起始的距離50px(從左邊50像素的位置開始)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
height: 200px;
width: 200px;
border: 5px solid red;
margin: 50px auto 100px;
position: relative;
}
.box img{
opacity: 0.5;/*圖片半透明，這樣可以看到父元素邊框，子元素圖像益處效果*/
}
.box .clip{
position: absolute;
top: 0;
left: 0;
/*
clip:rect(上邊起始的距離 , 自左道右的距離, 自上到下的距離, 左邊起始的距離)
*/
clip:rect(0, 300px, 100px, 50px);
/* 裁切說明:根據(jù)上下圖比較,上邊起始的距離為0px(從頂部開始的地方),
自左道右的距離300px(截取的寬度), 自上到下的距離為100px (截取的高度), 左邊起始的距離50px(從左邊開始的地方)*/
}
</style>
</head>
<body>
<div class="box">
<img class="clip" src="images/timg1.jpg" >
</div>
<div class="box">
<img src="images/timg1.jpg" >
</div>
</body>
</html>
對比裁剪效果預(yù)覽
實(shí)踐案例——利用CSS3 clip 裁剪與動(dòng)畫制作精美動(dòng)態(tài)效果
1、 準(zhǔn)備
搭建環(huán)境，建一個(gè)小盒子box ，設(shè)置背景顏色并水平居中。
然后通過給盒子設(shè)置after 和 before 偽類元素，并給偽類元素設(shè)置樣式。
要求，偽類元素比box大一點(diǎn)，達(dá)到上下左右四邊2像素線包圍box效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: rgba(0,0,0,0.8);
}
.box {
height: 200px;
width: 200px;
background: rgba(10, 150, 220, 1);
margin: 50px auto;
position: relative;
}
.box::after,
.box::before {
content: "";
position: absolute;
width: 220px;
height: 220px;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
/*內(nèi)陰影 inset*/
left: 0;
top: 0;
margin: -10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
準(zhǔn)備效果圖
2、設(shè)計(jì)clip 裁剪效果
設(shè)計(jì)CLIP裁剪效果預(yù)覽
clip代碼如下：
/* clip:rect(上邊起始的距離 , 自左道右的距離, 自上到下的距離, 左邊起始的距離) */
/* 開始0% ： 裁剪保留上邊部分*/
/* clip: rect(0px, 220px, 2px, 0px); */
/* 25% ： 裁剪保留左邊部分*/
/* clip: rect(0px, 2px, 220px, 0px); */
/* 50% ： 裁剪保留底邊部分*/
/* clip: rect(218px, 220px, 220px, 0px); */
/* 75% ： 裁剪保留右邊部分 */
clip: rect(0px, 220px, 220px, 218px);
/* 結(jié)束100% ： 回到原點(diǎn) 裁剪保留上邊部分*/
/* clip: rect(0px, 220px, 2px, 0px); */
3、設(shè)計(jì)結(jié)合clip設(shè)置動(dòng)畫效果
大功告成，上完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: rgba(0, 0, 0, 0.8);
}
.box {
height: 200px;
width: 200px;
background: rgba(10, 150, 220, 1);
margin: 50px auto;
position: relative;
}
.box::after,
.box::before {
content: "";
position: absolute;
width: 220px;
height: 220px;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
/*內(nèi)陰影 inset*/
left: 0;
top: 0;
margin: -10px;
/*
設(shè)計(jì)CLIP:
clip:rect(上邊起始的距離 , 自左道右的距離, 自上到下的距離, 左邊起始的距離)
*/
/* 開始0% ： 裁剪保留上邊部分*/
/* clip: rect(0px, 220px, 2px, 0px); */
/* 25% ： 裁剪保留左邊部分*/
/* clip: rect(0px, 2px, 220px, 0px); */
/* 50% ： 裁剪保留底邊部分*/
/* clip: rect(218px, 220px, 220px, 0px); */
/* 75% ： 裁剪保留右邊部分 */
/* clip: rect(0px, 220px, 220px, 218px); */
/* 結(jié)束100% ： 回到原點(diǎn) 裁剪保留上邊部分*/
/* clip: rect(0px, 220px, 2px, 0px); */
animation: aaa 6s linear infinite; /*應(yīng)用動(dòng)畫aaa 勻速運(yùn)動(dòng) 重復(fù)執(zhí)行*/
}
.box::before {
animation-delay: 3s; /*讓before 比after 慢3秒,總時(shí)間6秒,這樣就形成對角線動(dòng)畫效果*/
}
@keyframes aaa {
0%,
100% {
clip: rect(0px, 220px, 2px, 0px); /*初始和結(jié)束狀態(tài):上邊線條*/
}
25% {
clip: rect(0px, 2px, 220px, 0px); /*左邊線條*/
}
50% {
clip: rect(218px, 220px, 220px, 0px); /*底邊線條*/
}
75% {
clip: rect(0px, 220px, 220px, 218px); /*右邊線條*/
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
動(dòng)態(tài)效果截圖
朋友們，可直接將最后代碼拷貝到網(wǎng)頁頁面保存預(yù)覽?。。。?/p>
