当前位置：首页 > CSS

用css制作火车图标

2026-01-08 19:55:10CSS

使用CSS制作火车图标

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

基础结构

HTML部分只需一个div元素作为容器：

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

车身部分

.train {
  position: relative;
  width: 120px;
  height: 60px;
  background-color: #3498db;
  border-radius: 10px 30px 10px 10px;
}

车头窗户

使用伪元素创建前窗：

.train::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 15px;
  width: 25px;
  height: 20px;
  background-color: #fff;
  border-radius: 5px;
}

车厢连接处

.train::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 20px;
  width: 10px;
  height: 20px;
  background-color: #2980b9;
  border-radius: 5px 0 0 5px;
}

车轮效果

通过box-shadow创建多个车轮：

.train {
  box-shadow: 
    20px 45px 0 -8px #2c3e50,
    60px 45px 0 -8px #2c3e50,
    100px 45px 0 -8px #2c3e50;
}

完整示例

.train {
  position: relative;
  width: 120px;
  height: 60px;
  background-color: #3498db;
  border-radius: 10px 30px 10px 10px;
  box-shadow: 
    20px 45px 0 -8px #2c3e50,
    60px 45px 0 -8px #2c3e50,
    100px 45px 0 -8px #2c3e50;
}

.train::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 15px;
  width: 25px;
  height: 20px;
  background-color: #fff;
  border-radius: 5px;
}

.train::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 20px;
  width: 10px;
  height: 20px;
  background-color: #2980b9;
  border-radius: 5px 0 0 5px;
}

进阶优化

添加烟雾效果：

用css制作火车图标

.train {
  animation: smoke 2s infinite;
}

@keyframes smoke {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.1); }
  100% { box-shadow: -30px -20px 30px 10px rgba(255,255,255,0); }
}

通过调整尺寸和颜色参数，可以创建不同风格的火车图标。这种方法仅使用CSS，无需图像文件，适合网页性能优化场景。