当前位置:首页 > CSS

用css制作火车图标

2026-01-27 22:14:00CSS

使用CSS制作火车图标

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

用css制作火车图标

火车主体部分

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

火车窗户

使用伪元素创建窗户:

用css制作火车图标

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

标签: 图标火车
分享给朋友:

相关文章

css图标制作

css图标制作

CSS 图标制作方法 使用 Unicode 或图标字体 通过引入字体库(如 Font Awesome)或直接使用 Unicode 符号生成图标。例如,Font Awesome 的图标可通过类名调用:…

css图标制作

css图标制作

使用CSS制作图标的方法 纯CSS绘制基础形状 通过CSS的border、width、height等属性可以绘制简单图标: .heart { width: 20px; height: 20p…

uniapp滑动图标

uniapp滑动图标

uniapp滑动图标的实现方法 使用swiper组件实现横向滑动图标 在uniapp中可以通过swiper组件实现图标的横向滑动效果。以下是一个基础示例代码: <template>…

vue实现图标跳动

vue实现图标跳动

实现图标跳动的几种方法 在Vue中实现图标跳动效果可以通过CSS动画、第三方动画库或JavaScript动态控制样式。以下是几种常见实现方式: CSS关键帧动画 通过@keyframes定义跳动…

vue实现图标加文字

vue实现图标加文字

Vue 实现图标加文字的几种方法 在 Vue 中实现图标加文字的常见方式有多种,可以根据项目需求和使用的图标库选择合适的方法。 使用 Element UI 或 Ant Design Vue 等 U…

react如何给菜单添加图标

react如何给菜单添加图标

使用第三方图标库(如Font Awesome) 安装Font Awesome库: npm install @fortawesome/fontawesome-svg-core @fortawesome…