当前位置: 首页 > news >正文

CSS实现小车旅行动画实现

小车旅行动画实现

效果展示

在这里插入图片描述

CSS 知识点

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

动画场景分析

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

在这里插入图片描述

整体页面结构

<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的字体库来实现,具体的样式如下:

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

太阳样式实现

.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 100pxorange;
}

大山样式实现

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

公路样式实现

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

  • 实现道路整体效果
.road {position: absolute;bottom: 0;left: 0;width: 100%;height: 60px;background: #333;z-index: 3;
}
  • 实现道路上方绿色色块(采用伪块来实现)
.road::before {content: "";position: absolute;width: 100%;height: 10px;background: #0d9e0d;
}
  • 使用 background 属性中的 repeating-linear-gradient 值实现道路的线条
.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;
}

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

在这里插入图片描述

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

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

树木样式实现

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

云层样式实现

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

完整代码下载

完整代码下载

相关文章:

CSS实现小车旅行动画实现

小车旅行动画实现 效果展示 CSS 知识点 灵活使用 background 属性下的 repeating-linear-gradient 实现路面效果灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果 动画场景分析 从效果图可以看出需要实现此动画的话&#xff0c;需要position属性控制元素…...

6_相机坐标系_相机4个坐标系详述

相机系列文章是用来记录使用opencv3来完成单目相机和6轴机械臂手眼标定。本人吃饭的主职是linux下6轴机械臂相关应用开发。但对于机械臂运动学、相机应用等都非常感兴趣&#xff0c;所以对一些线性代数基础薄弱又想深入了解机械臂内部运算的同志比较有体会。由于是探索性学习&a…...

软考 - 系统架构设计师 - 敏捷开发方法

前言 敏捷开发方法是一种以人为核心、迭代、循序渐进的软件开发方法。它强调团队合作、客户需求和适应变化&#xff0c;旨在通过快速迭代和反馈来快速交付高质量的软件产品。 敏捷开发方法的优势在于能够快速响应变化、提高开发效率和质量、增强团队协作和沟通&#xff0c;并降…...

Django 仿博客园练习

数据库搭建 部分功能介绍 【一】注册 &#xff08;1&#xff09;效果显示、简单简介 主要亮点 结合了layui和forms组件默认头像可以随着性别的选择发生改变自定义头像可以实时更新显示forms组件报错信息可以局部刷新显示在对应框体下面 没有直接使用layui的前端验证后端验证…...

MySQL(常用函数、多表查询)

文章目录 1.数据库函数1.count函数案例答案count&#xff08;*&#xff09;与count&#xff08;列&#xff09;的区别 2.sum函数案例答案 3.avg函数案例答案 4.max/min函数案例答案 5.group by 分组统计案例答案 6.字符串相关函数演示练习 7.数学相关函数演示 8.日期相关函数演…...

【Pt】马灯贴图绘制过程 01-制作基础色

目录 一、导入模型并烘焙 二、制作基础底漆 &#xff08;1&#xff09;底漆层 &#xff08;2&#xff09;水痕层 &#xff08;3&#xff09;指纹层 一、导入模型并烘焙 1. 导入模型&#xff0c;马灯模型如下所示 2. 在纹理集设置中点击“烘焙模型贴图” 设置输出大小为…...

TransmittableThreadLocal 问题杂记

0、前言 TransmittableThreadLocal&#xff0c;简称 TTL&#xff0c;是阿里巴巴开源的一个Java库&#xff0c;它能够实现ThreadLocal在多线程间的值传递&#xff0c;适用于使用线程池、异步调用等需要线程切换的场景&#xff0c;解决了ThreadLocal在使用父子线程、线程池时不能…...

Linux之 线程池 | 单例模式的线程安全问题 | 其他锁

目录 一、线程池 1、线程池 2、线程池代码 3、线程池的应用场景 二、单例模式的线程安全问题 1、线程池的单例模式 2、线程安全问题 三、其他锁 一、线程池 1、线程池 线程池是一种线程使用模式。线程池里面可以维护一些线程。 为什么要有线程池&#xff1f; 因为在…...

Composer常见错误及解决方案

Composer常见错误及解决方案 Composer是PHP的依赖管理工具&#xff0c;它使得在PHP项目中管理和安装依赖库变得简单。然而&#xff0c;在使用Composer时&#xff0c;开发者可能会遇到一些常见的错误。在本文中&#xff0c;我们将探讨一些常见的Composer错误以及相应的解决方案…...

系统架构图怎么画

画架构图是架构师的一门必修功课。 对于架构图是什么这个问题&#xff0c;我们可以按以下等式进行概括&#xff1a; 架构图 架构的表达 架构在不同抽象角度和不同抽象层次的表达&#xff0c;这是一个自然而然的过程。 不是先有图再有业务流程、系统设计和领域模型等&#…...

微信小程序页面生命周期和小程序api组件的生命周期

小程序组件的生命周期...

通过node 后端实现颜色窃贼 (取出某个图片的主体rgb颜色 )

1.需求 我前端轮播图的背景色 想通过每一张轮播图片的颜色作为背景色 这样的话 需要通过一张图片 取出图片的颜色 这个工作通过前端去处理 也可以通过后端去处理 前端我试了试 color-thief 的插件 但是 这个插件是基于canvas 的模式来的 我需要在小程序中使用这个插件 而且是…...

【蓝桥杯第十三届省赛B组】(详解)

九进制转十进制 #include <iostream> #include<math.h> using namespace std; int main() {cout << 2*pow(9,3)0*pow(9,2)2*pow(9,1)2*pow(9,0) << endl;return 0; }顺子日期 #include <iostream> using namespace std; int main() {// 请在此…...

网址打包微信小程序源码 wap转微信小程序 网站转小程序源码 网址转小程序开发

内容目录 一、详细介绍二、效果展示2.效果图展示 三、学习资料下载 一、详细介绍 我们都知道微信小程序是无法直接打开网址的。 这个小程序源码提供了一种将网址直接打包成微信小程序的方法&#xff0c; 使得用户可以在微信小程序中直接访问这些网址内容。 这个源码没有进行加…...

C# OpenCvSharp 轮廓检测

目录 效果 代码 下载 效果 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using OpenCvSharp.…...

阿里云服务器安装SSL证书不起作用的解决方案

阿里云服务器安装SSL证书不起作用的解决方案 在阿里云安装SSL证书后&#xff0c;访问无效&#xff0c;各种检查证书安装没有问题。忽然想到阿里云默认连80端口都没开启&#xff0c;443端口应该也没开启。 登录阿里云控制台 - 云服务器 ECS - 网络与安全 - 安全组 - 管理规则 - …...

【二】【设计模式】建造者模式

建造者模式的引入 //C10_1.cpp #include <stdio.h>#include "SystemConfig.h"int main() {SystemConfig config("mysql://127.0.0.1/", "xiaomu", "xiaomumemeda","redis://127.0.0.1/", "xiaomuredis", &q…...

Linux 系统 CentOS7 上搭建 Hadoop HDFS集群详细步骤

集群搭建 整体思路:先在一个节点上安装、配置,然后再克隆出多个节点,修改 IP ,免密,主机名等 提前规划: 需要三个节点,主机名分别命名:node1、node2、node3 在下面对 node1 配置时,先假设 node2 和 node3 是存在的 **注意:**整个搭建过程,除了1和2 步,其他操作都使…...

【Python】python+requests+excel+pytest-实现接口自动化实例

目录 测试需求实现思路完整框架2.1 初始化数据 (test_data.xlsx)2.2 核心脚本 (api_client.py)2.3 测试用例 (test_interfaces.py)2.4 日志 (logging)2.5 pytest配置文件 (pytest.ini)2.6 测试报告 (pytest-html)2.7 入口函数 (run_tests.py)2.8 完整流程注意事项测试需求 简单…...

Django(四)-搭建第一个应用(3)

一、问题详情页 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>展示某个投票的问题和不带结果的选项列表</title> </head> <body><form action"{% url polls:vote questi…...

基于springboot美食分享平台设计与开发(源码+精品论文+答辩PPT等资料)

博主介绍&#xff1a;CSDN毕设辅导第一人、靠谱第一人、全网粉丝50W,csdn特邀作者、博客专家、腾讯云社区合作讲师、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交…...

新手也能懂的RAIM算法:用Python复现GNSS完好性监测(附代码与数据)

新手也能懂的RAIM算法&#xff1a;用Python复现GNSS完好性监测&#xff08;附代码与数据&#xff09; 当你用手机导航时&#xff0c;是否想过这些定位信号有多可靠&#xff1f;RAIM&#xff08;Receiver Autonomous Integrity Monitoring&#xff09;算法就像GNSS系统的"质…...

FlatBuffers游戏开发终极指南:如何实现零解析实时数据传输

FlatBuffers游戏开发终极指南&#xff1a;如何实现零解析实时数据传输 【免费下载链接】flatbuffers FlatBuffers: Memory Efficient Serialization Library 项目地址: https://gitcode.com/gh_mirrors/flat/flatbuffers 在游戏开发中&#xff0c;数据传输的效率直接影响…...

Vision-Agents:构建下一代实时视觉AI代理的终极指南

Vision-Agents&#xff1a;构建下一代实时视觉AI代理的终极指南 【免费下载链接】Vision-Agents Open Vision Agents by Stream. Build Vision Agents quickly with any model or video provider. Uses Streams edge network for ultra-low latency. 项目地址: https://gitco…...

手把手教你用ThinkPHP6和Uniapp从零搭建一个物业设备巡检小程序(附完整源码)

从零构建物业设备巡检系统&#xff1a;ThinkPHP6与Uniapp全栈实战指南 物业设备巡检是保障设施安全运行的关键环节&#xff0c;传统纸质记录方式效率低下且难以追溯。本教程将带您从零开始&#xff0c;基于ThinkPHP6后端框架与Uniapp跨端方案&#xff0c;构建一个功能完整的移动…...

C++ 模板与泛型编程入门

C 模板与泛型编程入门 模板把类型&#xff08;及非类型参数&#xff09;作为参数&#xff0c;在编译期由编译器按用法生成具体函数或类&#xff0c;是 C 泛型编程与 STL 的基础。下文以 Max、简单类模板、选择排序及可定制比较器为例说明常见写法&#xff1b;排序复杂度为 (O(…...

遥感影像配准总对不齐?OpenCV+RST+PROJ4三重坐标系对齐实战(附WGS84→UTM→影像本地坐标的转换矩阵速查表)

第一章&#xff1a;Shell脚本的基本语法和命令Shell脚本是Linux/Unix系统自动化任务的核心工具&#xff0c;以可执行文本文件形式存在&#xff0c;由Bash等shell解释器逐行解析运行。其语法简洁但严谨&#xff0c;对空格、分号、引号和换行符敏感&#xff0c;需严格遵循语法规则…...

某民办高校关键人才梯队建设项目成功案例纪实

——破解“断层”隐忧&#xff0c;构建人才梯队蓄水池【客户行业】学校、民办学校、民办高等教育【问题类型】人才梯队建设&#xff1b;人才培养体系&#xff1b;激励体系&#xff1b;核心人才保留【客户背景】长三角地区一所知名的民办应用型本科院校&#xff0c;建校25年&…...

OpenClaw监控方案:Qwen3.5-4B-Claude模型异常任务预警系统

OpenClaw监控方案&#xff1a;Qwen3.5-4B-Claude模型异常任务预警系统 1. 为什么需要自动化监控方案 去年夏天的一个深夜&#xff0c;我被连续不断的手机震动声惊醒。打开电脑发现某个数据处理脚本已经运行了18小时——它本该在2小时内完成。更糟糕的是&#xff0c;这个错误导…...

51单片机定时器初值计算与Proteus仿真

51单片机定时器初值计算方法详解1. 定时器基础原理1.1 单片机定时器工作模式51系列单片机内置的定时器/计数器模块是嵌入式系统中实现精确时间控制的核心部件。定时器本质上是一个特殊功能的寄存器&#xff0c;通过累加时钟脉冲实现计时功能。根据位数不同&#xff0c;51单片机…...