居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(#666,#333);}定义容器的大小：.loader{width:8em;高度：10em；font-size:20px;}先画火车。画出火车的轮廓：.train{width:6em;高度：6em；颜色：#444；背景：#bbb4ab；边界半径：1em；位置：相对；left:1em;}用::before伪元素绘制Window:.train::before{content:'';位置：绝对；宽度：80%；高度：2.3em；背景颜色：currentColor；边界半径：0.4em；顶部：1.2em；left:10%;}使用::after伪元素在窗口上绘制信号灯：.train::after{content:'';位置：绝对；宽度：25%；高度：0.4em；背景颜色：currentColor；边界半径：0.3em；顶部：0.4em；left:calc((100%-25%)/2);}用径向渐变画灯：.train{background:radial-gradient(circleat20%80%,currentColor0.6em,transparent0.6em),radial-gradient(circleat80%80%,currentColor0.6em,transparent0.6em),#bbb;}接下来画铁轨和枕木。定义轨道的宽度，比火车略宽：.track{width:8em;}用伪元素绘制轨道：.track{position:relative;}.track::before,.track::after{内容：'';位置：绝对；宽度：0.3em；高度：4em；背景色：#bbb；border-radius:0.4em;}在两侧分别放置rails，形成近大远小的视觉效果：.track::before,.track::after{transform-origin:bottom;}.track::before{左:0;transform:skewX(-27deg);}.track::after{right:0;transform:skewX(27deg);}绘制卧铺，这是最接近观察者的效果。目前，3个轨枕重叠：.trackspan{width:inherit;高度：0.3em；背景色：#bbb；位置：绝对；top:4em;}为轨道设置动画：.trackspan{animation:track-animate1slinearinfinite;}@keyframestrack-animate{0%{transform:translateY(-0.5em)scaleX(0.9);过滤器：不透明度（0）；}10%,90%{过滤器:不透明度(1);}100%{转换：translateY(-4em)scaleX(0.5);过滤器：不透明度（0）；}}为其他2个sleeper设置动画延迟，使轨道看起来永远不会结束：.trackspan:nth-child(2){animation-delay:-0.33s;}.trackspan:nth-child(3){animation-delay:-0.66s;}最后给火车加上动画效果，看起来好像在轻微晃动driving:.train{animation:train-animate1.5sinfiniteease-in-out;}@keyframestrain-animate{0%,100%{transform:rotate(0deg);}25%,75%{变换：旋转（0.5度）；}50%{变换：旋转（-0.5deg）；}}你完成了！