当前位置：首页 > CSS

css制作汽车

2026-04-01 07:55:53CSS

CSS 制作汽车

使用CSS可以创建简单的汽车图形，主要通过div元素和CSS样式来构建车身、车轮等部分。以下是一个基本的CSS汽车示例：

css制作汽车

HTML 结构

<div class="car">
  <div class="car-body"></div>
  <div class="car-top"></div>
  <div class="wheel front-wheel"></div>
  <div class="wheel back-wheel"></div>
  <div class="light"></div>
</div>

CSS 样式

.car {
  position: relative;
  width: 200px;
  height: 80px;
  margin: 50px auto;
}

.car-body {
  width: 100%;
  height: 40px;
  background-color: #3498db;
  border-radius: 10px;
}

.car-top {
  position: absolute;
  top: -20px;
  left: 30px;
  width: 70px;
  height: 30px;
  background-color: #2980b9;
  border-radius: 5px 5px 0 0;
}

.wheel {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #2c3e50;
  border-radius: 50%;
  bottom: -15px;
}

.front-wheel {
  left: 20px;
}

.back-wheel {
  right: 20px;
}

.light {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 5px;
  background-color: #f1c40f;
  border-radius: 5px;
}

动画效果

可以为汽车添加简单的移动动画：

css制作汽车

.car {
  animation: drive 5s linear infinite;
}

@keyframes drive {
  from { transform: translateX(-100px); }
  to { transform: translateX(500px); }
}

进阶样式

可以添加更多细节使汽车更逼真：

.car-body {
  box-shadow: 0 5px 0 rgba(0,0,0,0.2);
}

.wheel:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ecf0f1;
  border-radius: 50%;
  top: 10px;
  left: 10px;
}

.wheel {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

响应式设计

可以使用CSS变量使汽车大小可调整：

:root {
  --car-width: 200px;
  --car-height: 80px;
}

.car {
  width: var(--car-width);
  height: var(--car-height);
}

@media (max-width: 600px) {
  :root {
    --car-width: 150px;
    --car-height: 60px;
  }
}

这些CSS技巧可以组合使用来创建各种风格的汽车图形，通过调整颜色、尺寸和形状可以设计出不同类型的车辆。