如何用純CSS實現動態行駛的火車

這篇文章給大家介紹的文章內容是關於如何用純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);    }}

大功告成！