本文主要是介绍clip:rect / turn 介绍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、clip:rect矩形剪裁功能及一些应用介绍
clip ，为修剪，剪裁之意。配合其属性关键字 rect 可以实现元素的矩形裁剪效果 clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
clip : 三个属性值
rect (top, right, bottom, left),
auto,
inherit
.icon-loading{
width:30px;
height:30px;
position:absolute;
left:50%;
top:50%;
border:2px solid #4990e2;
border-radius:30px;
animation:git1 1s linear infinite;
-webkit-animation:git1 1s linear infinite;
clip:rect(0px auto 15px 0px);
}
2、turn 理解
转、圈（Turns）。一个圆共1圈
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
css:
.demo-wrap{background-color:#fff;
}
.loading{width:200px;height:200px;position:relative;
}
.icon-loading1{width:30px;height:30px;position:absolute;left:50%;top:50%;border:2px solid #4990e2;border-radius:30px;animation:git1 1s linear infinite;-webkit-animation:git1 1s linear infinite; clip:rect(0px auto 15px 0px);
}@keyframes git1{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(1turn);-webkit-transform:rotate(1turn);}
}
@-webkit-keyframes git1{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(1turn);-webkit-transform:rotate(1turn);}
}html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scale=no">
<title></title>
<link rel="stylesheet" href="loading.css">
</head>
<body>
<div class="demo-wrap"><div class="loading"><span class="icon-loading1"></span></div>
</div>
</body>
</html>效果：
这篇关于clip:rect / turn 介绍的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
