实现了一个跳跃球加载动画效果，包括一个背景颜色为深灰色的容器和多个跳跃的球。每个球都有一个阴影效果，使其看起来更加立体。球的运动轨迹是向上跳跃，然后下落，再次跳跃，形成连续的跳跃效果。同时，球的颜色和阴影效果也会随着运动的变化而变化。
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彩色跳动球加载</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
}
.loader {
width: 650px;
height: 200px;
position: relative;
}
.loader span.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: lightseagreen;
position: absolute;
left: calc(var(--i) * 100px);
animation: jump 2s linear infinite calc(var(--i) * 0.3s);
}
.loader span.shadow {
width: 50px;
height: 25px;
border-radius: 50%;
background-color: #000;
position: absolute;
left: calc(var(--i) * 100px);
bottom: -12.5px;
z-index: -1;
animation: shadow 2s linear infinite calc(var(--i) * 0.3s);
}
@keyframes jump {
0%, 100% {
bottom: 150px;
}
40%, 60% {
bottom: 0;
height: 50px;
}
50% {
height: 25px;
filter: hue-rotate(180deg);
}
}
@keyframes shadow {
0%, 100% {
transform: scale(2);
opacity: 0.1;
filter: blur(5px);
}
40%, 60% {
transform: scale(1);
opacity: 1;
filter: blur(2px);
}
}
</style>
</head>
<body>
<div class="loader">
<span class="ball" style="--i:1;"></span>
<span class="shadow" style="--i:1;"></span>
<span class="ball" style="--i:2;"></span>
<span class="shadow" style="--i:2;"></span>
<span class="ball" style="--i:3;"></span>
<span class="shadow" style="--i:3;"></span>
<span class="ball" style="--i:4;"></span>
<span class="shadow" style="--i:4;"></span>
<span class="ball" style="--i:5;"></span>
<span class="shadow" style="--i:5;"></span>
</div>
</body>
</html>
