css实现汽车动画效果图

CSS动画可以帮助我们轻松实现汽车动画效果图，让我们的网页更加生动有趣。

.car {
  position: absolute;
  top: 50%;
  left: -20%;
  width: 20%;
  height: 20%;
  background-color: #fff;
  border-radius: 5px;
  animation: drive 5s linear infinite;
}

.car .wheel {
  position: absolute;
  bottom: 10%;
  width: 30%;
  height: 30%;
  background-color: #000;
  border-radius: 50%;
  animation: wheel 5s linear infinite;
}

.car .wheel.left {
  left: 20%;
}

.car .wheel.right {
  right: 20%;
}

@keyframes drive {
  0% {
    transform: translateX(-20%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes wheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

上述代码中，我们首先定义了一个.car类，用于定义汽车的整体样式，并设定了一段名为drive的动画，控制汽车前进的动作。同时还定义了一个.wheel类，用于定义车轮的样式，并设定了一段名为wheel的动画，控制车轮旋转的动作。

需要注意的是，我们在.wheel类中使用了.left和.right类，用于控制车轮的位置。这样，在动画进行过程中，车轮将会正常地绕着轮子转动，给人一种非常真实的感觉。

最后，我们只需要在HTML中添加一个div元素，并把它设置为我们定义的.car类即可：

<div class="car">
  <div class="wheel left"></div>
  <div class="wheel right"></div>
</div>

至此，一个简单而生动的汽车动画效果图就完成了！