效果预览

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

可交互视频教程

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

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

源代码下载

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

代码解读

定义 dom，只有一个元素：

居中显示：

body {    margin: 0;    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    background-color: black;}

定义容器的尺寸：

.loader {    width: 10em;    height: 3em;    border: 0.3em solid silver;    border-radius: 3em;    font-size: 20px;}

把容器左右两侧分别涂上不同的颜色：

.loader {    border-left-color: hotpink;    border-right-color: dodgerblue;}

在容器中画一个小球：

.loader {    position: relative;}.loader::before {    content: '';    position: absolute;    top: 0;    left: 0;    width: 3em;    height: 3em;    border-radius: 50%;    background-color: dodgerblue;}

让小球在容器中往复移动：

.loader::before {    animation: shift 3s linear infinite;}@keyframes shift {    50% {        left: 7em;    }}

再让小球在撞到两端时变色：

.loader::before {    animation:        shift 3s linear infinite,        change-color 3s linear infinite;}@keyframes change-color {    0%, 55% {        background-color: dodgerblue;    }    5%, 50% {        background-color: hotpink;    }}

最后，让容器不停地旋转：

.loader {    animation: spin 3s linear infinite;}@keyframes spin {    to {        transform: rotate(360deg);    }}

大功告成！