用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属性，可以创建不同风格的火车图标，改变颜色、大小和细节来满足不同设计需求。