哈喽比特
注册  |  登录
0
0

纯 CSS3 卡通小火车行驶动画

发表于 2年以前  | 总阅读数：352 次

自从CSS3流行以来，基于纯CSS3的动画就层出不穷，有纯CSS3的人物动画、纯CSS3按钮动画等。这次，我们给大家分享一个很不错的CSS3卡通火车沿轨道行驶动画，一辆卡通样式的火车缓缓驰过，特别是火车头的动画设计，非常可爱和逼真。

效果预览

代码实现

HTML代码

<div class="center">
  <div class="mountains"></div>
  <div class="train">
    <div class="engine-front">
      <div class="chimney">
        <div class="smoke"></div>
        <div class="smoke smoke-2"></div>
        <div class="smoke smoke-3"></div>
        <div class="smoke smoke-4"></div>
      </div>
    </div>

    <div class="engine-body"></div>

    <div class="compartment">
      <div class="compartment-window"></div>
    </div>

    <div class="compartment compartment-two">
      <div class="compartment-window"></div>
    </div>

    <div class="compartment compartment-three">
      <div class="compartment-window"></div>
    </div>

    <div class="wheel-holder">
      <div class="wheel"></div>
      <div class="wheel wheel-2">
        <div class="wheel-joint"></div>
        <div class="wheel-joint wheel-joint-2"></div>
      </div>
      <div class="wheel wheel-3"></div>
      <div class="wheel wheel-4"></div>
      <div class="wheel wheel-5"></div>
      <div class="wheel wheel-6"></div>
      <div class="wheel wheel-7"></div>
      <div class="wheel wheel-8"></div>
      <div class="wheel wheel-9"></div>
    </div>
  </div>
  <div class="bridge"></div>
</div>

HTML代码的结构非常清晰，总体来讲分两部分，一部分是作为背景的明月、高山以及星空，对应的CSS类为mountains；另一部分则是行驶的火车，对应的CSS类为train。

对于火车部分则相对比较复杂，有车头、引擎、轨道、车轮、车厢等元素，下面的CSS代码中会一一讲解。

CSS代码

背景部分绘制了两座高山，一轮明月以及清澈的星空。

.mountains {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.mountains::before, .mountains::after {
  background: #000c18;
  background: -moz-linear-gradient(#012a53, #000c18 50%);
  background: -webkit-linear-gradient(#012a53, #000c18 50%);
  background: -o-linear-gradient(#012a53, #000c18 50%);
  background: -ms-linear-gradient(#012a53, #000c18 50%);
  background: linear-gradient(#012a53, #000c18 50%);
  content: "";
  height: 100%;
  position: absolute;
}
.mountains::before {
  border-radius: 100% 300% 0 0;
  left: -20%;
  width: 57%;
}
.mountains::after {
  border-radius: 300% 100% 0 0;
  right: -20%;
  width: 80%;
}

然后就是火车轨道的桥梁部分，也十分简单。

.bridge {
  border-bottom: 0.3rem solid white;
  border-top: 0.3rem solid white;
  background: black;
  background: -webkit-linear-gradient(55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem, -webkit-linear-gradient(-55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem;
  background: -moz-linear-gradient(55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem, -moz-linear-gradient(-55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem;
  background: -o-linear-gradient(55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem, -o-linear-gradient(-55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem;
  background: -ms-linear-gradient(55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem, -ms-linear-gradient(-55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem;
  background: linear-gradient(55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem, linear-gradient(-55deg, transparent 46%, white 46%, white 54%, transparent 54%) left/1.6rem 2.2rem;
  bottom: 10rem;
  height: 2.6rem;
  position: absolute;
  width: 100%;
  z-index: 1;
}

在后面就是本动画的主体部分小火车了，其每一部分都有对应的CSS类来描述，请看代码：

.train {
  animation: move-train 24s linear infinite;
  bottom: 12.6rem;
  height: 10rem;
  position: absolute;
  left: calc(100% + 1.3rem);
  width: 44rem;
  z-index: 1;
}

.engine-front, .engine-front::before, .engine-front::after {
  background: #0f0f0f;
  background: linear-gradient(0deg, #0f0f0f, #262626, #0f0f0f);
  border: 0.1rem solid rgba(255, 255, 255, 0.15);
  border-radius: 50% 0 0 50%;
  border-right: none;
}

.engine-front {
  animation: body-upDown 0.3s infinite;
  border-radius: 0.5rem 0 0 0.5rem;
  bottom: 1.4rem;
  height: 4.6rem;
  left: 0;
  position: absolute;
  width: 8rem;
}
.engine-front::before, .engine-front::after {
  content: "";
  position: absolute;
  height: 70%;
  left: -0.9rem;
  top: 50%;
  transform: translate(0, -50%);
  width: 0.8rem;
}
.engine-front::after {
  height: 40%;
  left: -1.4rem;
  width: 0.5rem;
}

.chimney {
  background: #990000;
  height: 2.2rem;
  left: 2.5rem;
  position: absolute;
  top: -2.3rem;
  width: 1.7rem;
}
.chimney::before, .chimney::after {
  content: "";
  position: absolute;
}
.chimney::before {
  animation: up-down 0.3s infinite;
  border-bottom: none;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.8rem solid orange;
  left: 50%;
  top: -0.9rem;
  transform: translate(-50%, 0);
  width: 160%;
}

.smoke {
  animation: move-smoke 0.4s linear infinite;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  height: 1.4rem;
  left: 0.2rem;
  position: absolute;
  top: -1.5rem;
  width: 0.8rem;
  z-index: -1;
}
.smoke-2 {
  animation-delay: 0.1s;
  left: 0.4rem;
}
.smoke-3 {
  animation-delay: 0.2s;
  left: 0.6rem;
}
.smoke-4 {
  left: 0.8rem;
}

.engine-body {
  animation: body-upDown 0.3s 0.1s infinite;
  background: #b30000;
  background: linear-gradient(0deg, #330000, red, #990000);
  border-radius: 0 0 0.4rem 0;
  bottom: 1.4rem;
  height: 7rem;
  left: 8rem;
  position: absolute;
  width: 5rem;
}
.engine-body::before, .engine-body::after {
  content: "";
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}
.engine-body::before {
  animation: up-down 0.3s 0.2s infinite;
  background: #660000;
  background: linear-gradient(0deg, #660000, #990000, #660000);
  border-radius: 50% 50% 0 0;
  height: 1.2rem;
  top: -1.2rem;
  width: 130%;
}
.engine-body::after {
  background: #b3e0f2;
  border-radius: 0.2rem;
  height: 40%;
  top: 1rem;
  width: 45%;
}

.wheel::before, .wheel::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.wheel-holder {
  height: 2.8rem;
  bottom: 0;
  position: absolute;
  width: 100%;
}

.wheel {
  animation: rotate 2s linear infinite;
  background: orange;
  border: 0.3rem solid rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  height: 2.8rem;
  left: 1rem;
  position: absolute;
  width: 2.8rem;
}
.wheel-2 {
  left: 4.5rem;
}
.wheel-3 {
  border-width: 0.5rem;
  height: 3.8rem;
  left: 8.7rem;
  top: -1.1rem;
  width: 3.8rem;
}
.wheel-4 {
  left: 15.7rem;
}
.wheel-5 {
  left: 19.5rem;
}
.wheel-6 {
  left: 25.7rem;
}
.wheel-7 {
  left: 29.5rem;
}
.wheel-8 {
  left: 35.7rem;
}
.wheel-9 {
  left: 39.5rem;
}
.wheel::before, .wheel::after {
  content: "";
  position: absolute;
}
.wheel::before {
  background: rgba(0, 0, 0, 0.3);
  height: 86%;
  width: 0.2rem;
}
.wheel::after {
  background: #996300;
  background: -webkit-radial-gradient(circle at center, #b37400 30%, #996300 30%);
  background: -moz-radial-gradient(circle at center, #b37400 30%, #996300 30%);
  background: -o-radial-gradient(circle at center, #b37400 30%, #996300 30%);
  background: -ms-radial-gradient(circle at center, #b37400 30%, #996300 30%);
  background: radial-gradient(circle at center, #b37400 30%, #996300 30%);
  border-radius: 50%;
  height: 40%;
  width: 40%;
}

.compartment {
  animation: body-upDown 0.3s infinite;
  background: #186c8e;
  background: -webkit-linear-gradient(#104b63 50%, #1f8dba);
  background: -moz-linear-gradient(#104b63 50%, #1f8dba);
  background: -o-linear-gradient(#104b63 50%, #1f8dba);
  background: -ms-linear-gradient(#104b63 50%, #1f8dba);
  background: linear-gradient(#104b63 50%, #1f8dba);
  border-radius: 0 0 0.3rem 0.3rem;
  bottom: 1.4rem;
  height: 5rem;
  left: 15rem;
  position: absolute;
  width: 8rem;
}
.compartment-two {
  animation: body-upDown 0.3s 0.1s infinite;
  left: 25rem;
}
.compartment-two .compartment-window::before {
  animation: up-down 0.3s 0.3s infinite;
}
.compartment-three {
  animation: body-upDown 0.3s 0.2s infinite;
  left: 35rem;
}
.compartment-three .compartment-window::before {
  animation: up-down 0.35s infinite;
}
.compartment::before, .compartment::after {
  background: black;
  border: 0.4rem solid transparent;
  bottom: 0.4rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  content: "";
  height: 0.8rem;
  position: absolute;
  width: 0.9rem;
}
.compartment::before {
  border-left: 0.4rem solid rgba(255, 255, 255, 0.3);
  left: -0.9rem;
}
.compartment::after {
  border-right: 0.4rem solid rgba(255, 255, 255, 0.3);
  left: -2rem;
}

.compartment-window {
  background: #1f8dba;
  background: -moz-linear-gradient(90deg, transparent 0.8rem, skyblue 0.8rem) left/2.4rem 100%;
  background: -webkit-linear-gradient(90deg, transparent 0.8rem, skyblue 0.8rem) left/2.4rem 100%;
  background: -o-linear-gradient(90deg, transparent 0.8rem, skyblue 0.8rem) left/2.4rem 100%;
  background: -ms-linear-gradient(90deg, transparent 0.8rem, skyblue 0.8rem) left/2.4rem 100%;
  background: linear-gradient(90deg, transparent 0.8rem, skyblue 0.8rem) left/2.4rem 100%;
  height: 40%;
  position: absolute;
  top: 0.7rem;
  width: 100%;
}
.compartment-window::before, .compartment-window::after {
  content: "";
  position: absolute;
}
.compartment-window::before {
  animation: up-down 0.3s 0.1s infinite;
  background: #104b63;
  border-radius: 50% 50% 0 0;
  height: 0.6rem;
  left: 50%;
  top: -1.4rem;
  transform: translate(-50%, 0);
  width: 110%;
}

到这里为止，我们已经用HTML和CSS代码将整个小火车以及周围的环境都绘制出来了。

那么最重要的一步便是让这辆小火车在桥梁上行驶起来，这就要用到CSS3的一些动画属性了，CSS3的动画帧闪亮登场。

@keyframes up-down {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -0.3rem);
  }
}
@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes move-train {
  100% {
    transform: translateX(-154rem);
  }
}
@keyframes body-upDown {
  0%, 100% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-0.2rem);
  }
}
@keyframes move-smoke {
  0% {
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
  50% {
    -webkit-filter: blur(0.2rem);
    -moz-filter: blur(0.2rem);
    -o-filter: blur(0.2rem);
    -ms-filter: blur(0.2rem);
    filter: blur(0.2rem);
    opacity: 0.6;
    transform: translate(0, -3rem) scale(2);
  }
  100% {
    -webkit-filter: blur(0.3rem);
    -moz-filter: blur(0.3rem);
    -o-filter: blur(0.3rem);
    -ms-filter: blur(0.3rem);
    filter: blur(0.3rem);
    opacity: 0;
    transform: translate(2.5rem, -6rem) scale(3);
  }
}
@keyframes wheel-joint {
  100% {
    transform: rotate(360deg);
  }
}

这些动画中做了几件事情。

第一，让车厢盖子上下拍动，让动画小火车行驶的样子更加逼真。

第二，利用滤镜，非常生动地描绘出了小火车行驶过程中蒸汽机引擎冒出的蒸汽。

第三，让小火车整体在桥梁上周而复始地行驶，车轮也不停的转动。

到这里，整个小火车行驶的动画也就基本完成了。文章最后也将源码献给大家。

最后总结

这个CSS小火车动画，不仅是HTML代码还是CSS代码，结构都非常清晰，大家也很容易读懂代码。如果觉得不错，请给个赞吧！

本文由哈喽比特于2年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/gRP_bcOmdnt5OtaEvYZKsA

 相关推荐

刘强东夫妇：“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而，京东官方通过微博发言人发布的消息澄清了这些传言，称这些言论纯属虚假信息和蓄意捏造。

发布于：1年以前  |  808次阅读  |  详细内容 »

博主曝三大运营商，将集体采购百万台华为Mate60系列

日前，据博主“@超能数码君老周”爆料，国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于：1年以前  |  770次阅读  |  详细内容 »

ASML CEO警告：出口管制不是可行做法，不要“逼迫中国大陆创新”

据报道，荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦（ASML）CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于：1年以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选，字节再发力对抗B站

今年早些时候，抖音悄然上线了一款名为“青桃”的 App，Slogan 为“看见你的热爱”，根据应用介绍可知，“青桃”是一个属于年轻人的兴趣知识视频平台，由抖音官方出品的中长视频关联版本，整体风格有些类似B站。

发布于：1年以前  |  648次阅读  |  详细内容 »

威马CDO：中国每百户家庭仅17户有车

日前，威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”，同时，他发文表示：中国汽车普及率低于非洲国家尼日利亚，每百户家庭仅17户有车。意大利世界排名第一，每十户中九户有车。

发布于：1年以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日，一项新的研究发现，维生素 C 和 E 等抗氧化剂会激活一种机制，刺激癌症肿瘤中新血管的生长，帮助它们生长和扩散。

发布于：1年以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术，用以生产智能手表的钢质底盘

据媒体援引消息人士报道，苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后，3D系统一度大涨超10%，不过截至周三收盘，该股涨幅回落至2%以内。

发布于：1年以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日，坐拥千万粉丝的网红主播“秀才”账号被封禁，在社交媒体平台上引发热议。平台相关负责人表示，“秀才”账号违反平台相关规定，已封禁。据知情人士透露，秀才近期被举报存在违法行为，这可能是他被封禁的部分原因。据悉，“秀才”年龄39岁，是安徽省亳州市蒙城县人，抖音网红，粉丝数量超1200万。他曾被称为“中老年...

发布于：1年以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯，称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息，亚马逊的一些股东，包括持有该公司股票的一家养老基金，日前对亚马逊、其创始人贝索斯和其董事会提起诉讼，指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于：1年以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站，以推广自家应用程序

据消息，为推广自家应用，苹果现推出了一个名为“Apps by Apple”的网站，展示了苹果为旗下产品（如 iPhone、iPad、Apple Watch、Mac 和 Apple TV）开发的各种应用程序。

发布于：1年以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满：“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价，引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金（Future Fund）管理合伙人加里·布莱克发帖称，降价是一种“短期麻醉剂”，会让潜在客户等待进一步降价。

发布于：1年以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦：拿到许可，继续对华出口

据外媒9月2日报道，荷兰半导体设备制造商阿斯麦称，尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效，但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于：1年以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作：为苹果提供卫星服务

近日，根据美国证券交易委员会的文件显示，苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元（约 4.65 亿元人民币）。用于在 2023-2025 年期间，发射卫星，进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于：1年以前  |  430次阅读  |  详细内容 »

𝕏（推特）调整隐私政策，可拿用户发布的信息训练 AI 模型

据报道，马斯克旗下社交平台𝕏（推特）日前调整了隐私政策，允许 𝕏 使用用户发布的信息来训练其人工智能（AI）模型。新的隐私政策将于 9 月 29 日生效。新政策规定，𝕏可能会使用所收集到的平台信息和公开可用的信息，来帮助训练 𝕏 的机器学习或人工智能模型。

发布于：1年以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归：替老同事们高兴，对行业也是好事

9月2日，荣耀CEO赵明在采访中谈及华为手机回归时表示，替老同事们高兴，觉得手机行业，由于华为的回归，让竞争充满了更多的可能性和更多的魅力，对行业来说也是件好事。

发布于：1年以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能（AI）系统，该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于：1年以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日，非营利组织纽约真菌学会（NYMS）发出警告，表示亚马逊为代表的电商平台上，充斥着各种AI生成的蘑菇觅食科普书籍，其中存在诸多错误。

发布于：1年以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏（原推特）新隐私政策提到：“在您同意的情况下，我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于：1年以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲，国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上，各大企业都带来了最新的理念和产品，而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于：1年以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别，除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品，具体内容为：“以我对我‘子公司’的了解，我认为 iPhone 15 跟 iPhone 14 不会有什么区别的，除了序（列）号变了，这个‘不要脸’的东西，这个‘臭厨子’。

发布于：1年以前  |  398次阅读  |  详细内容 »

扫码在手机上访问

为您提供高质量的文档
 相关文章
Android插件化方案 5年以前  |  237236次阅读
vscode超好用的代码书签插件Bookmarks 2年以前  |  8071次阅读
 目录

去登录