这篇文章给大家介绍的文章内容是关于如何用纯css实现正在行驶中的火车，有很好的参考价值，希望可以帮助到有需要的朋友。
效果预览
代码解读定义 dom，容器中包含 2 个元素，train 代表火车，track 代表铁轨，其中包含的 3 个 <span> 代表 3 根枕木。
<p class="loader">    <p class="train"></p>    <p class="track">        <span></span>        <span></span>        <span></span>    </p></p>
居中显示：
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);    }}
大功告成！
相关推荐：
如何利用css画出一只小鸟(代码)
如何用纯css实现卡通鹦鹉的效果
以上就是如何用纯css实现动态行驶的火车的详细内容。