html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边缘融合加载</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
padding-bottom: 80px;
background: #000000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.loading {
width: 300px;
height: 300px;
background: #000000;
position: relative;
display: flex;
justify-content: center;
align-items: center;
filter: contrast(15);
}
.loading span {
width: 30px;
height: 30px;
background: #ffffff;
border-radius: 50%;
position: absolute;
left: 50px;
transform-origin: 100px center;
transform: rotate(calc(360deg / 8 * var(--i)));
animation: show 3s infinite;
filter: blur(5px);
}
@keyframes show {
0% {
transform: rotate(0deg) translateX(80px);
}
50%, 100% {
transform: rotate(calc(360deg / 8 * var(--i)));
}
100% {
transform: rotate(360deg) translateX(80px);
}
}
.text {
font-size: 20px;
color: #ffffff;
padding-left: 10px;
display: flex;
}
.text span {
padding: 0 4px;
animation: upDown 1.5s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes upDown {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-24px);
}
40%, 100% {
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="loading">
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
</div>
<div class="text">
<span style="--i:0">正</span>
<span style="--i:1">在</span>
<span style="--i:2">加</span>
<span style="--i:3">中</span>
<span style="--i:4">，</span>
<span style="--i:5">请</span>
<span style="--i:6">等</span>
<span style="--i:7">待</span>
<span style="--i:8">.</span>
<span style="--i:9">.</span>
<span style="--i:10">.</span>
</div>
</body>
</html>
