我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

css怎么实现车轨动画

2023-05-14 22:29

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

css怎么实现车轨动画

css怎么实现车轨动画

css怎么实现车轨动画？

纯 CSS3 卡通小火车行驶动画

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

对了，我发现我一发HTML之类的文章，你们就点赞啊收藏啊，一发C++、Java之类的那简直没人看，不是你们什么意思啊

效果预览

代码实现

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);
  }}

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

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

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

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

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

源码下载:https://www.php.cn/link/580d3fe23a092f670c3cf2bd0231341b

以上就是css怎么实现车轨动画的详细内容，更多请关注编程网其它相关文章！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

css
阅读原文内容投诉

css怎么实现车轨动画

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

css怎么实现车轨动画

css实现车轨动画的方法：1、创建一个HTML文件，并定义div为“<div class="center"><div class="mountains"></div>...</div>”；2、设置CSS类为mountains和train；3、通过使用CSS3的动画属性及动画帧“@keyframes”实现车轨动画即可。
2023-05-14

css如何实现车轨动画

这篇文章主要讲解了“css如何实现车轨动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css如何实现车轨动画”吧！css实现车轨动画的方法：1、创建一个HTML文件，并定义div为“
2023-07-05

css怎么实现动画

2024-04-02

怎么用纯CSS实现一个转动的自行车车轮的动画效果

2024-04-02

怎么使用纯css代码实现赛车的loader动画效果

2024-04-02

Vue中CSS动画怎么实现

本篇内容主要讲解“Vue中CSS动画怎么实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue中CSS动画怎么实现”吧!显示的过程：在动画即将被执行的瞬间，会往div上增加两个class名：f
2023-07-04

CSS怎么实现动画移动效果

这篇文章主要为大家展示了“CSS怎么实现动画移动效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS怎么实现动画移动效果”这篇文章吧。思路首先我们新建一个正方形，用标签
2023-06-27

Unity实现物体运动时画出轨迹

2024-04-02

基于Cesium实现卫星在轨绕行动画

2024-04-02

vue怎么实现购物车小球动画效果

这篇文章主要介绍“vue怎么实现购物车小球动画效果”，在日常操作中，相信很多人在vue怎么实现购物车小球动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现购物车小球动画效果”的疑惑有所帮助！
2023-07-04

怎么用css实现3d动画特效

2024-04-02

Android Studio实现小车简单运动动画

一、题目 1、参考课堂示例Ex10_1，通过绘制直线、矩形（填充与非填充）、多边形、圆和文本，绘制一个如附图1所示的简易式样的小车（注：图中的标注是各个图元的绘图参数，仅供参考）。【说明】具体绘图时，小车的颜色、样式等可自行设置（但不可过于
2022-06-06

怎么用@keyframes规则实现CSS动画

2024-04-02

CSS怎么实现雨滴动画效果

这篇文章主要介绍CSS怎么实现雨滴动画效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！玻璃窗今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。
2023-06-08

小程序怎么实现购物车抛物线动画

这篇文章主要介绍“小程序怎么实现购物车抛物线动画”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“小程序怎么实现购物车抛物线动画”文章能帮助大家解决问题。分析要实现抛物线动画，我当时想到的是用插件的方式
2023-06-26

CSS怎么实现CSS动画的暂停与播放

2024-04-02

css怎么实现弹跳球动画效果

2024-04-02

CSS中怎么实现多重背景动画

2024-04-02

CSS代码怎么实现loading动画效果

本篇内容介绍了“CSS代码怎么实现loading动画效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果：代码使用了CSS的keyfram
2023-07-04

怎么用CSS3和table标签实现一个圆形轨迹的动画

小编给大家分享一下怎么用CSS3和table标签实现一个圆形轨迹的动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！html：其实就是根据table标签把几个实心
2023-06-08

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈