[分享]css两点间货车行驶动画

CSS是前端工程师必须要掌握的技能之一，其中动画效果是很多网站都需要的。今天，我们就来学习一下如何使用CSS制作两点间货车行驶的动画效果。/ HTML代码 / / CSS代码 / .contai...

CSS是前端工程师必须要掌握的技能之一，其中动画效果是很多网站都需要的。今天，我们就来学习一下如何使用CSS制作两点间货车行驶的动画效果。

/* HTML代码 */ 
<div class="container">
   <div class="truck"></div>
</div>

/* CSS代码 */ 
.container {
   position: relative;
   width: ***px;
   height: 520px;
   margin: 20px auto;
   background: url("road.jpg") no-repeat center center;
   background-size: cover;
}

.truck {
   position: absolute;
   top: 50%;
   left: -100px;
   width: 100px;
   height: 50px;
   background: url("truck.png") no-repeat center center;
   background-size: cover;
   animation: move-truck 5s linear infinite;
}

@keyframes move-truck {
   from {
      left: -100px;
   }
   to {
      left: calc(100% + 100px);
   }
} 

上述代码中，我们首先在HTML中创建了一个容器，其中包含一个truck元素。在CSS中，我们将容器设置为相对定位，以保证truck元素可以在其中进行绝对定位。

接着，我们设置了truck元素的样式，包括宽度、高度、背景图片以及动画效果。在动画效果中，我们使用了关键帧动画（@keyframes）来定义从left:-100px（容器左侧外部）到left:calc(100% + 100px)（容器右侧外部）的变化。然后，我们在truck元素上应用了这个动画，并设置了其循环次数为无限（infinite）。

最后，我们就可以看到一个卡车在路上行驶的动画效果了。您可以根据需要自行修改容器和truck元素的样式，以适配您的项目需求。