clip做loading图标_页面在加载过程中,怎么设置一个loadin等待图标-优快云博客

本文链接：https://blog.youkuaiyun.com/Doulvme/article/details/97496355

定义：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>

效果：