<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background-color:rgb(240,228,228);
}
.quan{
position:relative;
width:180px;
height:180px;
border-radius:50%;
border:3pxsolidrgb(246,247,248);
box-shadow:0003pxrgb(41,134,196);
}
.shui{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgb(23,106,201);
border-radius:50%;
overflow:hidden;
}
.shui::after{
content:'';
position:absolute;
top:0;
left:50%;
width:150%;
height:150%;
border-radius:40%;
background-color:rgb(240,228,228);
animation:shi5slinearinfinite;
}
@keyframesshi{
0%{
transform:translate(-50%,-65%)rotate(0deg);
}
100%{
transform:translate(-50%,-65%)rotate(360deg);
}
}
.shui::before{
content:'';
position:absolute;
top:0;
left:50%;
width:150%;
height:150%;
border-radius:42%;
background-color:rgb(240,228,228,0.2);
animation:xu7slinearinfinite;
}
@keyframesxu{
0%{
transform:translate(-50%,-60%)rotate(0deg);
}
100%{
transform:translate(-50%,-60%)rotate(360deg);
}
}
</style>
</head>
<body>
<divclass="quan">
<divclass="shui"></div>
</div>
</body>
</html>
|