定義：clip 屬性剪裁絕對定位元素，和絕對定位一塊使用position:absolute;或position:fixed;一塊使用。
語法：rect (top, right, bottom, left)。
通過clip結合css3做loading動畫，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
position: relative;
margin: 50px;
width: 100px;
height: 100px;
border: 10px solid rgba(0,0,0,0.5);
border-radius: 100px;
/*animation: rotate0 1s ease-in-out infinite;*/
}
@-webkit-keyframes rotate0{
from{}
to{
transform: rotate(180deg);
}
}
.box-inner{
position: absolute;
left: -10px;
top: -10px;
width: 120px;
height: 120px;
/*background: rgba(0,255,0,0.6);*/
clip: rect(0,120px,120px,60px);
animation: move 1s ease-in-out infinite;
}
@-webkit-keyframes move{
from{}
to{transform: rotate(180deg);}
}
.box-inner:after{
content: "";
position: absolute;
width: 100px;
height: 100px;
border: 10px solid red;
clip: rect(0,120px,120px,60px);
/*background: rgba(255,0,0,0.6);*/
border-radius: 100px;
animation: rotate 1s ease-in-out infinite;
}
@-webkit-keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(180deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="box-inner"></div>
</div>
</body>
</html>
效果：
