Loading.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../css/loading.css">
<title>Loading...</title>
</head>
<body>
<div class="main-container">
<div class="line-container">
<div class="loading loading1">
<svg class="load" width="300" height="300">
<circle class="item" cx="150" cy="150" r=60></circle>
</svg>
</div>
<div>
<h1>Please keep waitting...</h1>
</div>
</div>
</div>
</body>
</html>
loading.css
*{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
background:rgb(55,40,65);
}
.main-container{
color: aliceblue;
padding-top: 100px;
}
.line-container{
width: 910px;
height: 300px;
margin:0 auto;
display:flex ;
flex-direction: row;
}
.line-container .loading{
width:300px;
text-align: center;
}
.line-container .loading.loading1{
animation:loading1-rotate 2s infinite 0s;
}
.line-container .loading.loading1 .item{
stroke:crimson;
stroke-dasharray:100;
stroke-width:10;
stroke-linecap:round;
fill:none;
}
@keyframes loading1-rotate{
0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}
}
h1{
margin-top:125px;
font-family:"华文行楷";
font-size:60px;
}
1148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
