用css制作火车图标

2026-04-01 00:39:22CSS

使用CSS制作火车图标

通过CSS的伪元素、边框和变换属性可以构建一个简易的火车图标。以下是具体实现方法：

用css制作火车图标

<div class="train"></div>

.train {
  width: 120px;
  height: 60px;
  background-color: #333;
  border-radius: 10px;
  position: relative;
  margin: 50px;
}

.train::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #555;
  border-radius: 50%;
  top: 45px;
  left: 15px;
}

.train::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #555;
  border-radius: 50%;
  top: 45px;
  right: 15px;
}

.train .window {
  position: absolute;
  width: 30px;
  height: 20px;
  background-color: #87CEEB;
  top: 15px;
  left: 20px;
}

.train .chimney {
  position: absolute;
  width: 10px;
  height: 20px;
  background-color: #222;
  top: -20px;
  right: 20px;
}

添加动画效果

让火车图标具有移动效果：

用css制作火车图标

.track {
  width: 300px;
  height: 5px;
  background-color: #666;
  position: relative;
}

.train {
  animation: moveTrain 3s linear infinite;
}

@keyframes moveTrain {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

更复杂的火车设计

构建包含多节车厢的火车：

<div class="locomotive"></div>
<div class="wagon"></div>
<div class="wagon"></div>

.locomotive, .wagon {
  width: 80px;
  height: 50px;
  background-color: #456;
  display: inline-block;
  position: relative;
  margin-right: -5px;
}

.locomotive {
  width: 100px;
  background-color: #234;
}

.locomotive::before, .wagon::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  bottom: -10px;
}

.locomotive::before { left: 20px; }
.wagon::before { left: 15px; }

.locomotive::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 15px;
  background-color: #222;
  top: -15px;
  right: 20px;
}

这些CSS代码可以创建不同复杂度的火车图标，通过调整尺寸、颜色和位置参数可获得各种风格的火车视觉效果。