前言
继上次实现一个小火车的效果后，这次我就带大家来实现一个汽车运货的效果，纯CSS实现，效果百分之九十九复刻。话不多说，咱们直接进入主题。
效果预览
最终实现的相关效果如下。
HTML部分
首先看到HTML部分。相关代码如下。
<div class="road"></div>
<div class="truck">
<div class="cab">
<div class="window"></div>
<div class="headlight"></div>
</div>
<div class="smoke"></div>
</div>
这里定义了一个卡车（truck）行驶在道路（road）上的场景结构，包含卡车驾驶室、车窗、车灯和烟雾效果。整体效果就是灰色道路（.road）上停放红色卡车（.truck），蓝色驾驶室（.cab）包含透明车窗和黄色车灯。
CSS部分
紧接着看到CSS部分。相关代码如下。
这里是类名为road的CSS部分，相关代码如下。
.road {
position: absolute;
width: 100%;
height: 80px;
bottom: 20vh;
background: #333;
box-shadow: 0 0 0 10px #555;
}
.road::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
background: repeating-linear-gradient(to right,
yellow 0, yellow 40px,
transparent 40px, transparent 80px);
top: 50%;
transform: translateY(-50%);
animation: road-move 1s linear infinite;
}
@keyframes road-move {
from { background-position-x: 0; }
to { background-position-x: -80px; }
}
这里定义了一个道路（.road）及其动态虚线分隔线的样式，模拟车辆行驶时道路的视觉效果。在道路主体设置好了颜色尺寸相关的内容，深灰色背景（#333），模拟沥青路面，向外扩展 10px 的灰色阴影，模拟路肩或道路边缘的厚度。
::before 伪元素来模拟道路中央的黄色虚线分隔线。这里的虚线是如何实现的呢？使用 repeating-linear-gradient 生成重复的黄色（yellow）和透明（transparent）间隔每 40px 黄色实线，接 40px 透明间隙，循环形成虚线。
接着来介绍一下这段动画，虚线滚动动画@keyframes road-move。通过改变渐变的背景位置（background-position-x），从 0 移动到 -80px（一个完整虚线周期的长度）， 负值向左移动，形成无限循环的滚动效果。动画周期为1秒，调整此值可改变滚动速度。
整体效果就是深灰色道路带浅灰色路肩，中央有一条黄色虚线分隔线。黄色虚线持续向左滚动，营造车辆向前行驶的视觉错觉。
接着这里是类名为truck的CSS部分，相关代码如下。
.truck {
width: 18em;
height: 6em;
font-size: 10px;
background: linear-gradient(to bottom, #E74C3C, #C0392B);
border-radius: 0.8em;
position: relative;
animation:
bounce 1s infinite ease-in-out,
move 8s infinite linear;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
z-index: 1;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes move {
0% { left: 90%; }
100% { left: -20em; }
}
这里定义了一个卡车（.truck）的样式和动画效果，模拟卡车在屏幕上行驶时的弹跳和移动效果。
先是描述了这卡车的尺寸外观颜色，再给这个卡车赋予一些动画属性，首先是弹跳动画（@keyframes bounce），卡车在垂直方向上轻微弹跳（-5px），模拟行驶中的颠簸， ease-in-out 使动画更平滑。然后是移动动画（@keyframes move），卡车从屏幕右侧（left: 90%）向左移动，直到完全消失（left: -20em），linear保证匀速运动，模拟稳定行驶。
综上所述，整体效果就是一辆红色卡车，带有立体阴影和圆角设计， 横向移动从左到右穿过屏幕，伴随移动轻微上下颠簸。
然后是truck的伪元素的CSS部分，相关代码如下。
.truck::before,
.truck::after,
.cab::after {
content: '';
position: absolute;
box-sizing: border-box;
width: 2.5em;
height: 2.5em;
background: radial-gradient(circle at 30% 30%, #555, #222);
border: 0.2em solid #EEE;
border-radius: 50%;
bottom: -1.2em;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.truck::before {
left: 1em;
animation: wheel-spin 1s infinite linear;
}
.truck::after {
right: 1em;
animation: wheel-spin 1s infinite linear;
}
@keyframes wheel-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
这里为卡车（.truck）和驾驶室（.cab）添加了车轮样式和旋转动画，定义卡车和驾驶室车轮的共用样式通过伪元素（::before 和 ::after）实现。接着是车轮旋转动画，轮以1秒/圈的速度无限顺时针旋转，模拟卡车行驶时的轮胎转动，所有车轮同步旋转（wheel-spin 动画），配合卡车的移动动画（如之前的 move 和 bounce）形成行驶效果。
最后再来看看段动画效果，相关代码如下。
@keyframes headlight {
from { box-shadow: 0 0 5px gold; }
to { box-shadow: 0 0 20px gold; }
}
@keyframes smoke-drift {
to {
transform: translate(-5em, -3em) scale(3);
}
}
@keyframes smoke-fade {
0%, 100% { opacity: 0; }
20% { opacity: 0.8; }
80% { opacity: 0; }
}
这里了三个关键帧动画，分别用于车头灯（headlight）的闪烁效果和烟雾（smoke）的飘散效果。
第一个动画作用是拟车头灯的亮度变化（如夜间行驶时的灯光闪烁）。从微弱的光晕（5px 模糊半径）过渡到强烈的光晕（20px 模糊半径），为金色（gold），可替换为其他颜色（如白色 white）。
第二个动画作用是烟雾从排气管飘散的路径，通过 缩放放大到原始尺寸的3倍（scale(3)），模拟烟雾扩散。
第三个动画作用是制烟雾的透明度变化，实现淡入淡出效果。烟雾在动画的20%时最浓（opacity: 0.8），随后逐渐消失，与 smoke-drift 结合使用，实现烟雾飘散+淡出的自然效果。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
