这篇文章给大家介绍的文章内容是关于如何用纯css实现正在行驶中的火车，有很好的参考价值，希望可以帮助到有需要的朋友。
效果预览
代码解读
定义 dom，容器中包含 2 个元素，train 代表火车，track 代表铁轨，其中包含的 3 个 代表 3 根枕木。
居中显示：
body{ margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(#666, #333);}
定义容器尺寸：
立即学习“前端免费学习笔记（深入）”；
.loader { width: 8em; height: 10em; font-size: 20px;}
先画火车。
画出火车的轮廓：
.train { width: 6em; height: 6em; color: #444; background: #bbb4ab; border-radius: 1em; position: relative; left: 1em;}
用 ::before 伪元素画出车窗：
.train::before { content: ''; position: absolute; width: 80%; height: 2.3em; background-color: currentColor; border-radius: 0.4em; top: 1.2em; left: 10%;}
再用 ::after 伪元素画出车窗上的信号灯：
.train::after { content: ''; position: absolute; width: 25%; height: 0.4em; background-color: currentColor; border-radius: 0.3em; top: 0.4em; left: calc((100% - 25%) / 2);}
利用径向渐变画出车灯：
.train { background: radial-gradient(circle at 20% 80%, currentColor 0.6em, transparent 0.6em), radial-gradient(circle at 80% 80%, currentColor 0.6em, transparent 0.6em), #bbb;}
接下来画铁轨和枕木。
定义铁轨的宽度，比火车稍宽：
.track { width: 8em;}
用伪元素画出铁轨：
.track { position: relative;}.track::before,.track::after { content: ''; position: absolute; width: 0.3em; height: 4em; background-color: #bbb; border-radius: 0.4em;}
把铁轨分别放置在两侧，并形成近大远小的视觉效果：
.track::before,.track::after { transform-origin: bottom;}.track::before { left: 0; transform: skewX(-27deg);}.track::after { right: 0; transform: skewX(27deg);}
画出枕木，这是距离观察者最近的效果，目前 3 根枕木是重叠在一起的：
.track span { width: inherit; height: 0.3em; background-color: #bbb; position: absolute; top: 4em;}
设置铁轨的动画效果：
.track span { animation: track-animate 1s linear infinite;}@keyframes track-animate { 0% { transform: translateY(-0.5em) scaleX(0.9); filter: opacity(0); } 10%, 90% { filter: opacity(1); } 100% { transform: translateY(-4em) scaleX(0.5); filter: opacity(0); }}
为另外 2 根枕木设置动画延时，使铁轨看起来就像永远走不完的样子：
.track span:nth-child(2) { animation-delay: -0.33s;}.track span:nth-child(3) { animation-delay: -0.66s;}
最后，为火车增加动画效果，看起来就像在行驶中微微晃动：
.train { animation: train-animate 1.5s infinite ease-in-out;}@keyframes train-animate { 0%, 100% { transform: rotate(0deg); } 25%, 75% { transform: rotate(0.5deg); } 50% { transform: rotate(-0.5deg); }}
大功告成！
相关推荐：
如何利用css画出一只小鸟(代码)
如何用纯CSS实现卡通鹦鹉的效果
以上就是如何用纯CSS实现动态行驶的火车的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610856.html
微信扫一扫 
支付宝扫一扫 
