20绿色 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面20</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.bg{
				background: linear-gradient(to bottom,#c7efce,#e0f6cf);
			}
			.loadingBox{
				width: 100%;
				height: 100%;
			}
			.loadingBox>div{
				position: absolute;
				box-sizing: border-box;
			}
			.loadingBox>div:first-child{
				border-left: 5px solid #b0cfb8;
				border-right: 5px solid #b0cfb8;
				left: 10px;
				top: 0px;
				width: calc(100% - 20px);
				height: 100%;
			}
			.loadingBox>div:nth-child(2){
				border-left: 10px solid #b0cfb8;
				border-right: 10px solid #b0cfb8;
				left: 20px;
				top: 0px;
				width: calc(100% - 40px);
				height: 100%;
			}
			.loadingBox>div:nth-child(3){
				border-left: 5px solid #b0cfb8;
				border-right: 5px solid #b0cfb8;
				left: 35px;
				top: 0px;
				width: calc(100% - 70px);
				height: 100%;
			}
			.loadingBox>div:nth-child(4){
				border-left: 3px solid #b0cfb8;
				border-right: 3px solid #b0cfb8;
				left: 0px;
				top: 10px;
				height: calc(100% - 20px);
				width: 100%;
			}
			.loadingBox>div:nth-child(5){
				border-left: 3px solid #b0cfb8;
				border-right: 3px solid #b0cfb8;
				left: 0px;
				top: 20px;
				height: calc(100% - 40px);
				width: 100%;
			}
		</style>
	</head>
	<body class="bg">
		<div class="loadingBox">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

　　

posted @ 2020-11-27 08:27  卿家尘归尘  阅读(61)  评论(0)    收藏  举报