用HTML5实现动画
用HTML5实现动画
要在HTML5中实现动画，可以使用以下几种方法：CSS动画、使用<canvas>元素和JavaScript来实现动画、使用JavaScript动画库。重点介绍前两种。
一、CSS动画
CSS3 动画：使用CSS3的动画属性和关键帧（keyframes）来创建动画效果。通过定义动画的开始状态、结束状态和过渡效果，可以实现平滑的动画效果。
先看一个简单的例子：
<html><head><meta charset="UTF-8" /><title>在HTML5中用CSS3实现简单动画</title><style>.box {width: 100px;height: 100px;background-color: red;animation: myAnimation 2s infinite;}@keyframes myAnimation {0% { transform: translateX(0px); }50% { transform: translateX(200px); }100% { transform: translateX(0px); }}</style></head><body> <div class="box"></div> </body>
</html>
我这里命名为：CSS3简单动画.html
用浏览器打开，运行效果：
下面给出一个小车动画
由两部分组成：
HTML文件和CSS文件，为方便使用，我将这两个文件放在同一文件夹中。
HTML文件，我这里命名为：CSS3小车动画.html，源码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>在HTML5中用CSS3实现动画</title><link rel="stylesheet" type="text/css" href="car.css"></head><body><div id="container"><div id="car"><div id="chassis"></div><div id="backtire" class="tire"><div class="hr"></div><div class="vr"></div></div><div id="fronttire" class="tire"><div class="hr"></div><div class="vr"></div></div> </div><div id="grass"></div></div></body>
</html>CSS文件，我这里命名为：car.css，源码如下：
/*定义动画：从-400px的位置移动到1600px的位置 */@keyframes carAnimation {0% { left: -400px; } /* 指定初始位置*/100% { left: 1600px; } /* 指定最终位置*/}#car {position: absolute;width: 400px;height: 210px;top: 300px;left: 50px;animation: carAnimation 10s infinite linear;}#chassis {position: absolute;width: 400px;height: 130px;background: #FF9900;border: 2px solid #FF6600;}.tire {position: absolute;bottom: 0;height: 120px;width: 120px;border-radius: 60px;background: #0099FF;border: 1px solid #3300FF;animation: tyreAnimation 10s infinite linear;}#fronttire {right: 20px;}#backtire {left: 20px;}@keyframes tyreAnimation {0% { transform: rotate(0); }100% { transform: rotate(1800deg); }}#grass {position: absolute;width: 100%;height: 130px;bottom: 0;background: linear-gradient(bottom, #33CC00, #66FF22);}.hr {position: absolute;background: #3300FF;height: 2px;width: 100%;top: 60px;}.vr {position: absolute;background: #3300FF;width: 2px;height: 100%;left: 60px;top: 0;}我这里命名为：CSS3简单动画.html
用浏览器打开，运行效果：
二、使用<canvas>元素和JavaScript来实现动画
先看一个简单的例子：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>在HTML5中用canvas+JS简单动画</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var x = 0;var dx = 2; // 方块的移动速度以及方向function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.fillRect(x, 50, 50, 50);// 更新方块的位置x += dx;// 如果方块触碰到画布的右边缘或左边缘，反转方向if (x + 50 > canvas.width || x < 0) {dx = -dx;}requestAnimationFrame(draw);}draw();
</script>
</body>
</html>
我这里命名为：canvas+JS简单动画.html
运行效果：
下面给出一个小车动画
由两部分组成
HTML文件和JavaScript文件，为方便使用，我将这两个文件放在同一文件夹中。
HTML文件，我这里命名为：canvas+JS小车动画.html，源码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>在HTML5中用canvas+JS小车动画</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;}
</style>
</head>
<body><canvas id="canvas"></canvas><script src="car.js"></script>
</body>
</html>
JavaScript文件，我这里命名为：car.js，源码如下：
const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// Set canvas full screencanvas.width = window.innerWidth;canvas.height = window.innerHeight-120; //const car = {x: 50,y: canvas.height - 180, //width: 200,height: 100,wheelRadius: 40,wheelOffset: 25,wheelRotation: 0};function drawCar(x, y, width, height, wheelRadius, wheelOffset, wheelRotation) {// Draw car bodyctx.fillStyle = 'orange';ctx.fillRect(x, y, width, height);// Draw wheelsconst wheelPositions = [{ x: x + wheelOffset, y: y + height },{ x: x + width - wheelOffset, y: y + height }];wheelPositions.forEach(wheelPos => {ctx.save();ctx.translate(wheelPos.x, wheelPos.y);ctx.rotate(wheelRotation);// Draw wheelctx.beginPath();ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2);ctx.fillStyle = 'blue';ctx.fill();// Draw spokesctx.beginPath();ctx.moveTo(-wheelRadius, 0);ctx.lineTo(wheelRadius, 0);ctx.moveTo(0, -wheelRadius);ctx.lineTo(0, wheelRadius);ctx.strokeStyle = 'white';ctx.lineWidth = 4;ctx.stroke();ctx.restore();});}function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);// Draw groundctx.fillStyle = 'green';ctx.fillRect(0, canvas.height - 50, canvas.width, 50);// Update wheel rotationcar.wheelRotation += 0.05;// Draw cardrawCar(car.x, car.y, car.width, car.height, car.wheelRadius, car.wheelOffset, car.wheelRotation);// Move carcar.x += 2;if (car.x > canvas.width) {car.x = -car.width;}requestAnimationFrame(animate);}animate();
用浏览器打开，效果如下：
修改上面源码，将两个文件合二为一，并添加几个控制按钮“暂停/继续”、“快”、“慢”，并实现相关功能：
点击pauseResumeBtn按钮会切换动画的暂停和继续状态。
点击speedUpBtn按钮会增加小车的速度。
点击speedDownBtn按钮会减慢小车的速度，但速度不能小于1。
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在HTML5中用canvas+JS小车可控动画</title>
<style>body {margin: 0;overflow: hidden;}canvas {display: block;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<button id="pauseResumeBtn">暂停/继续</button>
<button id="speedUpBtn">快</button>
<button id="speedDownBtn">慢</button>
<script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// Set canvas full screencanvas.width = window.innerWidth;canvas.height = window.innerHeight - 120; //const car = {x: 50,y: canvas.height - 180, //width: 200,height: 100,wheelRadius: 40,wheelOffset: 25,wheelRotation: 0,speed: 2};let isPaused = false;function drawCar(x, y, width, height, wheelRadius, wheelOffset, wheelRotation) {// Draw car bodyctx.fillStyle = 'orange';ctx.fillRect(x, y, width, height);// Draw wheelsconst wheelPositions = [{ x: x + wheelOffset, y: y + height },{ x: x + width - wheelOffset, y: y + height }];wheelPositions.forEach(wheelPos => {ctx.save();ctx.translate(wheelPos.x, wheelPos.y);ctx.rotate(wheelRotation);// Draw wheelctx.beginPath();ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2);ctx.fillStyle = 'blue';ctx.fill();// Draw spokesctx.beginPath();ctx.moveTo(-wheelRadius, 0);ctx.lineTo(wheelRadius, 0);ctx.moveTo(0, -wheelRadius);ctx.lineTo(0, wheelRadius);ctx.strokeStyle = 'white';ctx.lineWidth = 4;ctx.stroke();ctx.restore();});}function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);// Draw groundctx.fillStyle = 'green';ctx.fillRect(0, canvas.height - 50, canvas.width, 50);// Update wheel rotationcar.wheelRotation += 0.05;// Draw cardrawCar(car.x, car.y, car.width, car.height, car.wheelRadius, car.wheelOffset, car.wheelRotation);// Move carcar.x += car.speed;if (car.x > canvas.width) {car.x = -car.width;}if (!isPaused) {requestAnimationFrame(animate);}}// Button event listenersdocument.getElementById('pauseResumeBtn').addEventListener('click', function() {isPaused = !isPaused;if (!isPaused) {animate();}});document.getElementById('speedUpBtn').addEventListener('click', function() {car.speed += 1;});document.getElementById('speedDownBtn').addEventListener('click', function() {if (car.speed > 1) {car.speed -= 1;}});animate();
</script>
</body>
</html>我这里保存命名为：canvas+JS小车可控动画.html
用浏览器打开，效果如下：
三、使用JavaScript动画库
使用JavaScript动画库（如Anime.js、Velocity.js、Three.js等）可以更方便地创建复杂的动画效果，我没有深入学习了解，在此就不介绍了。
附录：
CSS3动画详解（图文教程） https://www.cnblogs.com/qianguyihao/p/8435182.html
anime.js 简单入门教程https://www.cnblogs.com/joyco773/p/10734850.html
Velocity.js 中文文档https://www.cnblogs.com/guandekuan/p/6643988.html
相关文章：
用HTML5实现动画
用HTML5实现动画 要在HTML5中实现动画，可以使用以下几种方法：CSS动画、使用<canvas>元素和JavaScript来实现动画、使用JavaScript动画库。重点介绍前两种。 一、CSS动画 CSS3 动画：使用CSS3的动画属性和关键帧（keyframes&…...
【Linux笔记】进程间通信之管道
一、匿名管道 我们在之前学习进程的时候就知道了一个概念，就是进程间是互相独立的，所以就算是两个进程是父子关系，其中一个进程退出了也不会影响另一个进程。 也因为进程间是互相独立的，所以两个进程间就不能直接的传递信息或者…...
【Node-RED】安全登陆时，账号密码设置
【Node-RED】安全登陆时，账号密码设置 前言实现步骤密码生成setting.js 文件修改 安全权限 前言 Node-RED 在初始下载完成时，登录是无账号密码的。基于安全性考虑，本期博文介绍在安全登陆时，如何进行账号密码设置。当然ÿ…...
-k8s的服务发现机制)
Kubernetes基础(二十一)-k8s的服务发现机制
1 概述 Kubernetes（K8s）是一个强大的容器编排平台，提供了丰富的功能来简化容器化应用的管理。其中之一重要的特性就是服务发现机制，它使得应用程序能够在K8s集群中动态地发现和访问其他服务。本文将深入研究K8s中的服务发现机制&…...
华纳云：docker更新容器镜像的常用方法
更新 Docker 容器镜像可以通过以下几种方法实现： 1. 使用 docker pull 命令手动拉取更新的镜像： docker pull <镜像名>:<标签> 这会拉取指定镜像的最新版本或者指定标签的版本到本地。然后您可以停止并删除现有的容器，使用新的镜…...
什么时候会触发FullGC？描述一下JVM加载class文件的原理机制？
什么时候会触发 FullGC？ 除直接调用 System.gc 外，触发 Full GC 执行的情况有如下四种。 1. 旧生代空间不足 旧生代空间只有 在新生代对象转入及创建为大对象、大数组时才会出现不足的现象，当执行 Full GC 后空间仍然不 足，则…...
HCIP-MGRE实验配置、PPP的PAP认证与CHAP认证、MGRE、GRE网络搭建、NAT
实验要求 R5为ISP,只能进行IP地址配素，其所有地址均为公有IP地址R1和R5间使用PPP的PAP认证，R5为主认证方 R2与R5之间使用PPP的chap认证，R5为主认证方 R3与R5之间使用HDLC封装。R1/R2/R3构建一个MGRE环境，R1为中心站点;R1、R4间为…...
react【四】css
文章目录 1、css1.1 react和vue css的对比1.2 内联样式1.3 普通的css1.4 css modules1.5 在react中使用less1.6 CSS in JS1.6.1 模板字符串的基本使用1.6.2 styled-components的基本使用1.6.3 接受传参1.6.4 使用变量1.6.5 继承样式 避免代码冗余1.6.6 设置主题色 1.7 React中添…...
SpringIOC之support模块SimpleThreadScope
博主介绍：✌全网粉丝5W+，全栈开发工程师，从事多年软件开发，在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战，博主也曾写过优秀论文，查重率极低，在这方面有丰富的经验✌ 博主作品：《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+…...
气味是否能通过光缆、信号传播？
搜索资料，有一点点眉目， 参考：未来网络可以传送气味 如何产生并被感知--双鸭山新闻网...
安装部署k8s集群
系统： CentOS Linux release 7.9.2009 (Core) 准备3台主机 192.168.44.148k8s-master92.168.44.154k8s-worker01192.168.44.155k8s-worker02 3台主机准备工作 关闭防火墙和selinux systemctl disable firewalld --nowsetenforce 0sed -i s/SELINUXenforcing/SELI…...
曲线生成 | 图解B样条曲线生成原理(基本概念与节点生成算法)
目录 0 专栏介绍1 什么是B样条曲线？2 基函数的de Boor递推式3 B样条曲线基本概念图解4 节点生成公式 0 专栏介绍 🔥附C/Python/Matlab全套代码🔥课程设计、毕业设计、创新竞赛必备！详细介绍全局规划(图搜索、采样法、智能算法等)…...
CyberDAO:web3时代的引领者
Web3.0正在改写着世界运行的规则，AGI将为人类未来的生产效率、工作方式与目标带来改变，区块链经过十余年发展开启了去中心化新格局，带来生产关系的变革。人类正在从过往以时间换取收入、听命完成工作，转变为以个性化、自主追求人生…...
java以及android类加载机制
类加载机制 一、Java类加载机制 java中，每一个类或者接口，在编译后，都会生成一个.class文件。 类加载机制指的是将这些.class文件中的二进制数据读入到内存中并对数据进行校验，解析和初始化。最终，每一个类都会在方…...
【Go】四、rpc跨语言编程基础与rpc的调用基础原理
Go管理工具 早期 Go 语言不使用 go module 进行包管理，而是使用 go path 进行包管理，这种管理方式十分老旧，两者最显著的区别就是：Go Path 创建之后没有 go.mod 文件被创建出来，而 go module 模式会创建出一个 go.mod…...
Linux CentOS系统安装SQL Server并结合内网穿透实现公网访问本地数据
🔥博客主页： 小羊失眠啦. 🎥系列专栏：《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞👍收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默&…...
输入捕获模式测频率PWM输入模式（PWMI）测占空比
一、概念介绍 输出比较： 比较电路输入的CNT、CCR大小关系 ，在通道引脚输出高低电平 二、*频率知识、测量方法补充 * N/fc得到标准频率的时长，也就是待测频率的周期 测频法代码实现：修改对射式红外传感器计次（上升沿…...
解锁VIP会员漫画：用Python爬虫轻松实现高清漫画下载
嗨喽~大家好呀，这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 环境使用: Python 3.10 Pycharm 模块使用: requests >>> pip install requests 数据请求模块 parsel >>> pip install parsel 数据解析模块…...
备战蓝桥杯---动态规划（入门3之子串问题）
本专题再介绍几种经典的字串问题。 这是一个两个不重叠字串和的问题，我们只要去枚举分界点c即可，我们不妨让c作为右区间的左边界，然后求[1,c)上的单个字串和并用max数组维护。对于右边，我们只要反向求单个字串和然后选左边界为c的…...
JavaScript：隐式类型转换与显式类型转换
文章目录 隐式类型转换（Implicit Type Conversion）1、字符串与数字的转换2、非布尔值到布尔值的转换3、在相等性比较中的转换4、对象到基础类型的转换5、在算术运算符中的其他转换 显式类型转换（Explicit Type Conversion）1、Numb…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
django filter 统计数量 按属性去重
在Django中，如果你想要根据某个属性对查询集进行去重并统计数量，你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求： 方法1：使用annotate()和Count 假设你有一个模型Item，并且你想…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
)
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
【Oracle】分区表
个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时，Again增益0db变化为6DB，画面的变化只有2倍DN的增益，比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析： 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 ：HyperText Transfer Protocol（超文本传输协议） 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。 请求方法 ： GET ：用于获取资源，…...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...