当前位置：首页 > CSS

css制作汽车

2026-02-27 08:17:03CSS

使用CSS制作汽车模型

使用CSS可以创建简单的汽车图形，主要通过div元素的组合和CSS样式实现。以下是创建基本汽车模型的步骤。

创建汽车主体

汽车主体是一个矩形，使用div并设置背景色、宽度和高度。

css制作汽车

<div class="car-body"></div>

.car-body {
  width: 200px;
  height: 60px;
  background-color: #ff0000;
  position: relative;
  border-radius: 10px;
}

添加车窗

车窗可以通过两个较小的矩形实现，放置在汽车主体上方。

<div class="car-window"></div>

.car-window {
  width: 180px;
  height: 20px;
  background-color: #87CEEB;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 5px;
}

绘制车轮

车轮使用圆形div，并通过border-radius: 50%实现。

css制作汽车

<div class="wheel front-wheel"></div>
<div class="wheel back-wheel"></div>

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

.front-wheel {
  left: 20px;
}

.back-wheel {
  right: 20px;
}

添加车灯

车灯可以通过小矩形或圆形实现，放置在汽车前端或后端。

<div class="headlight"></div>

.headlight {
  width: 10px;
  height: 5px;
  background-color: #FFFF00;
  position: absolute;
  left: 5px;
  top: 20px;
  border-radius: 2px;
}

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .car-body {
      width: 200px;
      height: 60px;
      background-color: #ff0000;
      position: relative;
      border-radius: 10px;
    }

    .car-window {
      width: 180px;
      height: 20px;
      background-color: #87CEEB;
      position: absolute;
      top: 10px;
      left: 10px;
      border-radius: 5px;
    }

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

    .front-wheel {
      left: 20px;
    }

    .back-wheel {
      right: 20px;
    }

    .headlight {
      width: 10px;
      height: 5px;
      background-color: #FFFF00;
      position: absolute;
      left: 5px;
      top: 20px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <div class="car-body">
    <div class="car-window"></div>
    <div class="wheel front-wheel"></div>
    <div class="wheel back-wheel"></div>
    <div class="headlight"></div>
  </div>
</body>
</html>

进阶样式

通过CSS变换和动画可以让汽车更生动。例如添加汽车移动动画。

.car-body {
  animation: drive 3s infinite linear;
}

@keyframes drive {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}