如何用纯 CSS 创作一个行驶中的火车 loader

古城微笑少年丶 2022-04-11 13:54 230阅读 0赞

![在这里插入图片描述][20181206172828554.gif]

## 效果预览 ##

[在线演示][Link 1]

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

[https://codepen.io/comehope/pen/RBLWzJ][https_codepen.io_comehope_pen_RBLWzJ]

## 可交互视频 ##

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

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

[https://scrimba.com/p/pEgDAM/cawN3f9][https_scrimba.com_p_pEgDAM_cawN3f9]

## 源代码下载 ##

[本地下载][Link 2]

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

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义 dom，容器中包含 2 个元素，`train` 代表火车，`track` 代表铁轨，其中包含的 3 个 `<span>` 代表 3 根枕木。

居中显示：

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

[20181206172828554.gif]: /images/20220411/64a707b8698c47d2b5e05489a40c62d0.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=%2Fwp-content%2Fuploads%2F2018%2F11%2Ffront-end-daily-challenges-master%2F091-train-loader&demotitle=%E7%94%A8%E7%BA%AF%20CSS%20%E5%88%9B%E4%BD%9C%E4%B8%80%E4%B8%AA%E8%A1%8C%E9%A9%B6%E4%B8%AD%E7%9A%84%E7%81%AB%E8%BD%A6%20loader
[https_codepen.io_comehope_pen_RBLWzJ]: https://codepen.io/comehope/pen/RBLWzJ
[https_scrimba.com_p_pEgDAM_cawN3f9]: https://scrimba.com/p/pEgDAM/cawN3f9
[Link 2]: http://www.jqhtml.com/20636.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges