用css制作火车图标
使用CSS制作火车图标
火车图标可以通过CSS的伪元素、边框和背景属性组合实现。以下是一个简单的火车图标实现方法:

火车主体部分
.train {
width: 120px;
height: 60px;
background-color: #333;
border-radius: 10px;
position: relative;
}
火车窗户
使用伪元素创建窗户:

.train::before, .train::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: #87CEEB;
border-radius: 50%;
top: 15px;
}
.train::before {
left: 20px;
}
.train::after {
right: 20px;
}
火车轮子
.wheels {
position: absolute;
bottom: -15px;
width: 100%;
display: flex;
justify-content: space-around;
}
.wheel {
width: 25px;
height: 25px;
background-color: #555;
border-radius: 50%;
border: 3px solid #222;
}
火车烟囱
.chimney {
position: absolute;
width: 10px;
height: 30px;
background-color: #444;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
完整HTML结构
<div class="train">
<div class="chimney"></div>
<div class="wheels">
<div class="wheel"></div>
<div class="wheel"></div>
</div>
</div>
动画效果(可选)
添加移动动画:
.train-container {
width: 500px;
overflow: hidden;
}
.train {
animation: moveTrain 5s linear infinite;
}
@keyframes moveTrain {
from { transform: translateX(-150px); }
to { transform: translateX(500px); }
}
进阶样式
增加细节使图标更精致:
.train {
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.wheel {
box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
}
.chimney::after {
content: '';
position: absolute;
width: 15px;
height: 40px;
background: linear-gradient(to top, #888, transparent);
bottom: -40px;
left: -2.5px;
border-radius: 50% 50% 0 0;
}
通过调整这些CSS属性,可以创建不同风格的火车图标,改变颜色、大小和细节来满足不同设计需求。





