<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background-color:rgb(7,15,26);
}
.container{
position:relative;
height:150px;
width:250px;
-webkit-box-reflect:below1pxlinear-gradient(transparent,rgb(7,15,26));
}
.container>span{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
color:rgb(20,129,202);
text-shadow:0010pxrgb(20,129,202),
0030pxrgb(20,129,202),
0060pxrgb(20,129,202),
00100pxrgb(20,129,202);
font-size:18px;
z-index:1;
}
.circle{
position:relative;
margin:0auto;
height:150px;
width:150px;
background-color:rgb(13,10,37);
border-radius:50%;
animation:zhuan2slinearinfinite;
}
@keyframeszhuan{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.circle::after{
content:'';
position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
background-color:rgb(7,15,26);
border-radius:50%;
}
.ring{
position:absolute;
top:0;
left:0;
width:75px;
height:150px;
background-image:linear-gradient(180deg,rgb(22,121,252),transparent80%);
border-radius:75px0075px;
}
.ring::after{
content:'';
position:absolute;
right:-5px;
top:-2.5px;
width:15px;
height:15px;
background-color:rgb(40,124,202);
box-shadow:005pxrgb(40,151,202),
0010pxrgb(40,124,202),
0020pxrgb(40,124,202),
0030pxrgb(40,124,202),
0040pxrgb(40,124,202),
0050pxrgb(40,124,202),
0060pxrgb(40,124,202),
0060pxrgb(40,124,202);
border-radius:50%;
z-index:1;
}
</style>
</head>
<body>
<divclass="container">
<span>Loading...</span>
<divclass="circle">
<divclass="ring"></div>
</div>
</div>
</body>
</html>
|