clip:rect / turn 介绍

最新推荐文章于 2021-07-27 22:17:46 发布

Mr_lwb

最新推荐文章于 2021-07-27 22:17:46 发布

阅读量413

点赞数

分类专栏： Css3 文章标签： clip rect turn

本文链接：https://blog.csdn.net/u010881899/article/details/59109569

版权

Css3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>

效果：