1、首先要认识一下clip 属性：
定义和用法
clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？默认情况下作为被包含的图像元素会益处其父元素。如下图所示：
图片益处效果预览
<!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" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
说明：这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
clip 原理说明图
clip 小demo说明其作用和使用技巧
clip:rect(0, 300px, 100px, 50px);
裁切说明（四个值的含义）:
第一个值：上边起始的距离为0px(从顶部0像素开始)；
第二个值：自左道右的距离300px(截取的宽度), ；
第三个值：自上到下的距离为100px (截取的高度)；
第四个值：左边起始的距离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);
/* 裁切说明:根据上下图比较,上边起始的距离为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>
对比裁剪效果预览
实践案例——利用CSS3 clip 裁剪与动画制作精美动态效果
1、 准备
搭建环境，建一个小盒子box ，设置背景颜色并水平居中。
然后通过给盒子设置after 和 before 伪类元素，并给伪类元素设置样式。
要求，伪类元素比box大一点，达到上下左右四边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);
/*内阴影 inset*/
left: 0;
top: 0;
margin: -10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
准备效果图
2、设计clip 裁剪效果
设计CLIP裁剪效果预览
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);
/* 结束100% ： 回到原点 裁剪保留上边部分*/
/* clip: rect(0px, 220px, 2px, 0px); */
3、设计结合clip设置动画效果
大功告成，上完整代码如下：
<!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);
/*内阴影 inset*/
left: 0;
top: 0;
margin: -10px;
/*
设计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); */
/* 结束100% ： 回到原点 裁剪保留上边部分*/
/* clip: rect(0px, 220px, 2px, 0px); */
animation: aaa 6s linear infinite; /*应用动画aaa 匀速运动 重复执行*/
}
.box::before {
animation-delay: 3s; /*让before 比after 慢3秒,总时间6秒,这样就形成对角线动画效果*/
}
@keyframes aaa {
0%,
100% {
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); /*右边线条*/
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动态效果截图
朋友们，可直接将最后代码拷贝到网页页面保存预览！！！！
