效果预览
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。
可交互视频
此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
每日前端实战系列的全部源代码请从 github 下载：
代码解读
定义 dom，容器中包含 2 个元素，train 代表火车，track 代表铁轨，其中包含的 3 个 <span> 代表 3 根枕木。
<div class="loader"> <div class="train"></div> <div class="track"> <span></span> <span></span> <span></span> </div></div>
居中显示：
body{ margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(#666, #333);} 定义容器尺寸：
.loader { width: 8em; height: 10em; font-size: 20px;} 先画火车。
画出火车的轮廓：.train { width: 6em; height: 6em; color: #444; background: #bbb4ab; border-radius: 1em; position: relative; left: 1em;} 用 ::before 伪元素画出车窗：
.train::before { content: ''; position: absolute; width: 80%; height: 2.3em; background-color: currentColor; border-radius: 0.4em; top: 1.2em; left: 10%;} 再用 ::after 伪元素画出车窗上的信号灯：
.train::after { content: ''; position: absolute; width: 25%; height: 0.4em; background-color: currentColor; border-radius: 0.3em; top: 0.4em; left: calc((100% - 25%) / 2);} 利用径向渐变画出车灯：
.train { background: radial-gradient(circle at 20% 80%, currentColor 0.6em, transparent 0.6em), radial-gradient(circle at 80% 80%, currentColor 0.6em, transparent 0.6em), #bbb;} 接下来画铁轨和枕木。
定义铁轨的宽度，比火车稍宽：.track { width: 8em;} 用伪元素画出铁轨：
.track { position: relative;}.track::before,.track::after { content: ''; position: absolute; width: 0.3em; height: 4em; background-color: #bbb; border-radius: 0.4em;} 把铁轨分别放置在两侧，并形成近大远小的视觉效果：
.track::before,.track::after { transform-origin: bottom;}.track::before { left: 0; transform: skewX(-27deg);}.track::after { right: 0; transform: skewX(27deg);} 画出枕木，这是距离观察者最近的效果，目前 3 根枕木是重叠在一起的：
.track span { width: inherit; height: 0.3em; background-color: #bbb; position: absolute; top: 4em;} 设置铁轨的动画效果：
.track span { animation: track-animate 1s linear infinite;}@keyframes track-animate { 0% { transform: translateY(-0.5em) scaleX(0.9); filter: opacity(0); } 10%, 90% { filter: opacity(1); } 100% { transform: translateY(-4em) scaleX(0.5); filter: opacity(0); }} 为另外 2 根枕木设置动画延时，使铁轨看起来就像永远走不完的样子：
.track span:nth-child(2) { animation-delay: -0.33s;}.track span:nth-child(3) { animation-delay: -0.66s;} 最后，为火车增加动画效果，看起来就像在行驶中微微晃动：
.train { animation: train-animate 1.5s infinite ease-in-out;}@keyframes train-animate { 0%, 100% { transform: rotate(0deg); } 25%, 75% { transform: rotate(0.5deg); } 50% { transform: rotate(-0.5deg); }} 大功告成！
原文地址：https://segmentfault.com/a/1190000015784640