效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

https://codepen.io/comehope/pen/ejrMKe

可交互视频

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/caw7yTv

源代码下载

本地下载

每日前端实战系列的全部源代码请从 github 下载：

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含 5 个元素，每个元素代表 1 个小球：

<div class="loader"><span></span><span></span><span></span><span></span><span></span>
</div>

居中显示：

body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background: radial-gradient(circle at center, sienna, maroon);
}

定义容器尺寸：

.loader {width: 6em;height: 1em;font-size: 40px;
}

画出圆点：

.loader {position: relative;
}.loader span {position: absolute;width: 1em;height: 1em;background-color: white;border-radius: 50%;left: 5em;
}

定义小球从右到左移动以及从左侧返回到右侧的动画效果：

.loader {--duration: 5s;
}.loader span {animation: walk linear infinite;animation-duration: var(--duration);
}@keyframes walk {0%, 95%, 100% {left: 5em;}80%, 85% {left: 0;}
}

再增加小球在最左端向上跳起和在最右端向下落下的动画效果：

.loader span {animation: walk linear infinite,jump linear infinite;
}@keyframes jump {80%, 100% {top: 0;}85%, 95% {top: -1em;}
}

再增加小球在从左侧返回到右侧时，因运动得快而稍被压扁的效果：

.loader span {animation: walk linear infinite,jump linear infinite,squash linear infinite;
}@keyframes squash {80%, 100% {width: 1em;height: 1em;}90% {width: 2em;height: 0.8em;}
}

为 5 个小球分别定义变量：

.loader span:nth-child(1) {--n: 1;
}.loader span:nth-child(2) {--n: 2;
}.loader span:nth-child(3) {--n: 3;
}.loader span:nth-child(4) {--n: 4;
}.loader span:nth-child(5) {--n: 5;
}

声明小球的数量：

.loader {--dots: 5;
}

设置动画延时：

.loader span {animation-delay: calc(var(--n) * var(--duration) / var(--dots) * -1);
}

最后，把点的尺寸改小一些：

.loader {font-size: 20px;
}

大功告成！

原文地址：https://segmentfault.com/a/1190000015868445