欢迎来到前端设计专栏，本专栏收藏了一些好看且实用的前端作品，使用简单的html、css语法打造创意有趣的作品，为网站加入更多高级创意的元素。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="小球loading.css">
</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>
css
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #333;
}
.loader {
width: 650px;
height: 200px;
position: relative;
}
.loader .ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: lightseagreen;
left: calc(var(--i) * 100px);
animation: jump 2s linear infinite calc(var(--i) * 0.3s);
}
.loader .shadow {
position: absolute;
bottom: -12.5px;
z-index: -1;
width: 50px;
height: 25px;
background-color: #000;
border-radius: 50%;
left: calc(var(--i) * 100px);
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);
}
}
使用了css 变量（ style=“–i:1”）