CSS实现小车旅行动画实现

小车旅行动画实现

效果展示

CSS 知识点

  • 灵活使用 background 属性下的 repeating-linear-gradient 实现路面效果
  • 灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果

动画场景分析

从效果图可以看出需要实现此动画的话,需要position属性控制元素部署到不同的层上从而形成堆叠效果,这样动画在执行的过程中会有比较好的运动差效果。具体的层次部署图如下:

整体页面结构

html 复制代码
<div class="scene">
  <div class="sun"></div>
  <!-- 路面 -->
  <div class="road"></div>

  <!-- 小车 -->
  <i class="fa-solid fa-van-shuttle"></i>

  <!-- 云朵 -->
  <i class="fa-solid fa-cloud" style="--i:1"></i>
  <i class="fa-solid fa-cloud" style="--i:2"></i>
  <i class="fa-solid fa-cloud" style="--i:3"></i>
  <i class="fa-solid fa-cloud" style="--i:4"></i>
  <i class="fa-solid fa-cloud" style="--i:5"></i>

  <!-- 树木 -->
  <i class="fa-solid fa-tree" style="--i:1"></i>
  <i class="fa-solid fa-tree" style="--i:2"></i>
  <i class="fa-solid fa-tree" style="--i:3"></i>
  <i class="fa-solid fa-tree" style="--i:4"></i>
  <i class="fa-solid fa-tree" style="--i:5"></i>
  <i class="fa-solid fa-tree" style="--i:6"></i>
  <i class="fa-solid fa-tree" style="--i:7"></i>

  <!-- 大山 -->
  <i class="fa-solid fa-mountain" style="--i:1"></i>
  <i class="fa-solid fa-mountain" style="--i:2"></i>
  <i class="fa-solid fa-mountain" style="--i:3"></i>
</div>

小车样式实现

小车实现起来比较简单,采用font-awesome的字体库来实现,具体的样式如下:

css 复制代码
.fa-van-shuttle {
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: #fff;
  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
  z-index: 10;
  animation: animateVan 0.2s linear infinite;
}

/* 动画结合transform属性实现小车的上下运动效果 */
@keyframes animateVan {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1px);
  }
}

太阳样式实现

css 复制代码
.sun {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  /* 使用 box-shadow 属性实现多层阴影效果,达到太远散射效果*/
  box-shadow: 0 0 40px orange, 0 0 60px orange, 0 0 80px orange, 0 0 100px
      orange;
}

大山样式实现

css 复制代码
.fa-mountain {
  position: absolute;
  bottom: 0;
  font-size: 10em;
  color: #8b3c23;
  z-index: 1;
  animation: animateClouds 15s linear infinite;
  /* 每座大山都有动画延迟 */
  animation-delay: calc(-3s * var(--i));
}

/* 使用 transform 属性实现大山移动动画,动画场景的容器为350px的宽度,所以动画起始是从350到-350之间重复运动 */
@keyframes animateClouds {
  0% {
    transform: translateX(350px);
  }
  100% {
    transform: translateX(-350px);
  }
}

公路样式实现

公路在实现的时候有点复杂,所以分布来说明

  • 实现道路整体效果
css 复制代码
.road {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #333;
  z-index: 3;
}
  • 实现道路上方绿色色块(采用伪块来实现)
css 复制代码
.road::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  background: #0d9e0d;
}
  • 使用 background 属性中的 repeating-linear-gradient 值实现道路的线条
css 复制代码
.road::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 50%,
    #fff 50%,
    #fff 100%
  );
  background-size: 30px;
}

完成上述代码后效果如下:

此时的道路并不会运动,所以添加动画实现运动效果,具体代码如下:

css 复制代码
@keyframes animateRoad {
  0% {
    background-position-x: 0;
  }
  100% {
    /* 数值越小,运动速度 */
    background-position-x: -30px;
  }
}

树木样式实现

css 复制代码
.fa-tree {
  position: absolute;
  bottom: 60px;
  font-size: 2em;
  color: #0d9e0d;
  z-index: 3;
  animation: animateClouds 7s linear infinite;
  /* 动画采用大山一样的动画,只是动画延迟时间不一样 */
  animation-delay: calc(-1s * var(--i));
}

云层样式实现

css 复制代码
.fa-cloud {
  position: absolute;
  top: calc(15px * var(--i));
  left: calc(15px * var(--i));
  font-size: 2.5em;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  z-index: 2;
  animation: animateClouds 3.5s linear infinite;
  animation-delay: calc(-4s * var(--i));
}

完整代码下载

完整代码下载

相关推荐
风铃喵游2 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte7 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟15 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor16 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter17 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝18 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽19 分钟前
Cookie、Session、JWT 的前世今生
前端
程序员辉哥20 分钟前
学会在Cursor中使用Rules生成代码后可以躺平了吗?
前端·后端
请你吃div25 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试
一个水瓶座程序猿.26 分钟前
Vue3 中使用 Vueuse
前端·javascript·vue.js