clip:rect / turn 介绍

2024-05-24 08:18

文章标签 介绍 turn clip rect

本文主要是介绍clip:rect / turn 介绍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、clip:rect矩形剪裁功能及一些应用介绍

CSS中有一个属性叫做 clip ，为修剪，剪裁之意。配合其属性关键字 rect 可以实现元素的矩形裁剪效果

clip 属性剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

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>

效果：