<!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{
100%;
height: 100%;
}
.bg{
background: linear-gradient(to bottom,#c7efce,#e0f6cf);
}
.loadingBox{
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;
calc(100% - 20px);
height: 100%;
}
.loadingBox>div:nth-child(2){
border-left: 10px solid #b0cfb8;
border-right: 10px solid #b0cfb8;
left: 20px;
top: 0px;
calc(100% - 40px);
height: 100%;
}
.loadingBox>div:nth-child(3){
border-left: 5px solid #b0cfb8;
border-right: 5px solid #b0cfb8;
left: 35px;
top: 0px;
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);
100%;
}
.loadingBox>div:nth-child(5){
border-left: 3px solid #b0cfb8;
border-right: 3px solid #b0cfb8;
left: 0px;
top: 20px;
height: calc(100% - 40px);
100%;
}
</style>
</head>
<body class="bg">
<div class="loadingBox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>