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

用HTML5实现动画

news 文章来源：https://blog.csdn.net/cnds123/article/details/136118232 2025/5/19 21:03:56

用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中实现动画&#xff0c;可以使用以下几种方法&#xff1a;CSS动画、使用<canvas>元素和JavaScript来实现动画、使用JavaScript动画库。重点介绍前两种。 一、CSS动画 CSS3 动画&#xff1a;使用CSS3的动画属性和关键帧&#xff08;keyframes&…...

编程日记 2024/2/19 18:53:02

【Linux笔记】进程间通信之管道

一、匿名管道 我们在之前学习进程的时候就知道了一个概念&#xff0c;就是进程间是互相独立的&#xff0c;所以就算是两个进程是父子关系&#xff0c;其中一个进程退出了也不会影响另一个进程。 也因为进程间是互相独立的&#xff0c;所以两个进程间就不能直接的传递信息或者…...

编程日记 2024/2/19 18:48:56

【Node-RED】安全登陆时，账号密码设置

【Node-RED】安全登陆时&#xff0c;账号密码设置 前言实现步骤密码生成setting.js 文件修改 安全权限 前言 Node-RED 在初始下载完成时&#xff0c;登录是无账号密码的。基于安全性考虑&#xff0c;本期博文介绍在安全登陆时&#xff0c;如何进行账号密码设置。当然&#xff…...

编程日记 2024/2/19 18:47:55

Kubernetes基础(二十一)-k8s的服务发现机制

1 概述 Kubernetes&#xff08;K8s&#xff09;是一个强大的容器编排平台&#xff0c;提供了丰富的功能来简化容器化应用的管理。其中之一重要的特性就是服务发现机制&#xff0c;它使得应用程序能够在K8s集群中动态地发现和访问其他服务。本文将深入研究K8s中的服务发现机制&…...

编程日记 2024/2/19 18:44:52

华纳云：docker更新容器镜像的常用方法

更新 Docker 容器镜像可以通过以下几种方法实现&#xff1a; 1. 使用 docker pull 命令手动拉取更新的镜像&#xff1a; docker pull <镜像名>:<标签> 这会拉取指定镜像的最新版本或者指定标签的版本到本地。然后您可以停止并删除现有的容器&#xff0c;使用新的镜…...

编程日记 2024/2/19 18:41:50

什么时候会触发FullGC？描述一下JVM加载class文件的原理机制？

什么时候会触发 FullGC&#xff1f; 除直接调用 System.gc 外&#xff0c;触发 Full GC 执行的情况有如下四种。 1. 旧生代空间不足 旧生代空间只有 在新生代对象转入及创建为大对象、大数组时才会出现不足的现象&#xff0c;当执行 Full GC 后空间仍然不 足&#xff0c;则…...

编程日记 2024/2/19 18:40:49

HCIP-MGRE实验配置、PPP的PAP认证与CHAP认证、MGRE、GRE网络搭建、NAT

实验要求 R5为ISP,只能进行IP地址配素&#xff0c;其所有地址均为公有IP地址R1和R5间使用PPP的PAP认证&#xff0c;R5为主认证方 R2与R5之间使用PPP的chap认证&#xff0c;R5为主认证方 R3与R5之间使用HDLC封装。R1/R2/R3构建一个MGRE环境&#xff0c;R1为中心站点;R1、R4间为…...

编程日记 2024/2/19 18:39:48

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中添…...

编程日记 2024/2/19 18:37:46

SpringIOC之support模块SimpleThreadScope

博主介绍：✌全网粉丝5W+，全栈开发工程师，从事多年软件开发，在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战，博主也曾写过优秀论文，查重率极低，在这方面有丰富的经验✌ 博主作品：《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+…...

编程日记 2024/2/19 18:34:43

气味是否能通过光缆、信号传播？

搜索资料&#xff0c;有一点点眉目&#xff0c; 参考&#xff1a;未来网络可以传送气味 如何产生并被感知--双鸭山新闻网...

编程日记 2024/2/19 18:32:41

安装部署k8s集群

系统&#xff1a; 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…...

编程日记 2024/2/19 18:27:36

曲线生成 | 图解B样条曲线生成原理(基本概念与节点生成算法)

目录 0 专栏介绍1 什么是B样条曲线&#xff1f;2 基函数的de Boor递推式3 B样条曲线基本概念图解4 节点生成公式 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细介绍全局规划(图搜索、采样法、智能算法等)…...

编程日记 2024/2/19 18:22:32

CyberDAO:web3时代的引领者

Web3.0正在改写着世界运行的规则&#xff0c;AGI将为人类未来的生产效率、工作方式与目标带来改变&#xff0c;区块链经过十余年发展开启了去中心化新格局&#xff0c;带来生产关系的变革。人类正在从过往以时间换取收入、听命完成工作&#xff0c;转变为以个性化、自主追求人生…...

编程日记 2024/2/19 18:18:27

java以及android类加载机制

类加载机制 一、Java类加载机制 java中&#xff0c;每一个类或者接口&#xff0c;在编译后&#xff0c;都会生成一个.class文件。 类加载机制指的是将这些.class文件中的二进制数据读入到内存中并对数据进行校验&#xff0c;解析和初始化。最终&#xff0c;每一个类都会在方…...

编程日记 2024/2/19 18:16:25

【Go】四、rpc跨语言编程基础与rpc的调用基础原理

Go管理工具 早期 Go 语言不使用 go module 进行包管理&#xff0c;而是使用 go path 进行包管理&#xff0c;这种管理方式十分老旧&#xff0c;两者最显著的区别就是&#xff1a;Go Path 创建之后没有 go.mod 文件被创建出来&#xff0c;而 go module 模式会创建出一个 go.mod…...

编程日记 2024/2/19 18:15:24

Linux CentOS系统安装SQL Server并结合内网穿透实现公网访问本地数据

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&…...

编程日记 2024/2/19 18:14:23

输入捕获模式测频率PWM输入模式（PWMI）测占空比

一、概念介绍 输出比较&#xff1a; 比较电路输入的CNT、CCR大小关系 &#xff0c;在通道引脚输出高低电平 二、*频率知识、测量方法补充 * N/fc得到标准频率的时长&#xff0c;也就是待测频率的周期 测频法代码实现&#xff1a;修改对射式红外传感器计次&#xff08;上升沿…...

编程日记 2024/2/19 18:12:21

解锁VIP会员漫画：用Python爬虫轻松实现高清漫画下载

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 环境使用: Python 3.10 Pycharm 模块使用: requests >>> pip install requests 数据请求模块 parsel >>> pip install parsel 数据解析模块…...

编程日记 2024/2/19 18:10:19

备战蓝桥杯---动态规划（入门3之子串问题）

本专题再介绍几种经典的字串问题。 这是一个两个不重叠字串和的问题&#xff0c;我们只要去枚举分界点c即可&#xff0c;我们不妨让c作为右区间的左边界&#xff0c;然后求[1,c)上的单个字串和并用max数组维护。对于右边&#xff0c;我们只要反向求单个字串和然后选左边界为c的…...

编程日记 2024/2/19 18:08:17

JavaScript：隐式类型转换与显式类型转换

文章目录 隐式类型转换&#xff08;Implicit Type Conversion&#xff09;1、字符串与数字的转换2、非布尔值到布尔值的转换3、在相等性比较中的转换4、对象到基础类型的转换5、在算术运算符中的其他转换 显式类型转换&#xff08;Explicit Type Conversion&#xff09;1、Numb…...

编程日记 2024/2/19 18:05:15

【电路笔记】-LR串联电路

LR串联电路 文章目录 LR串联电路1、概述2、示例1所有线圈、电感器、扼流圈和变压器都会在其周围产生磁场，由电感与电阻串联组成，形成 LR 串联电路。 1、概述 在本节有关电感器的第一个文章中，我们简要介绍了电感器的时间常数，指出流过电感器的电流不会瞬时变化，而是会以恒…...

编程日记 2024/2/19 18:02:12

Ansible 自动化运维工具的使用

目录 Ansible的简介 ansible 环境安装部署 ansible 命令行模块 command 模块 shell 模块 cron 模块 user 模块 group 模块 copy 模块 file 模块 hostname 模块 ping 模块 yum 模块 service/systemd 模块 script 模块 mount 模块 archive 模块 unarchive 模…...

编程日记 2024/2/19 18:00:09

亚马逊、ozon、速卖通、Lazada等跨境平台为什么评论老是被删

对于卖家而言&#xff0c;最难的并不是销售量&#xff0c;最难的是让客户在购买后能够留下一个高质量的review&#xff0c;毕竟现在的市场&#xff0c;以listing的排名为基准&#xff0c;以review数量多少和质量的高低来评判店铺的好坏 几乎所有的卖家都会有索评的烦恼&#x…...

编程日记 2024/2/19 17:59:07

手把手带你在Linux上安装带GPU加速的opencv库（C++版本）

1.安装依赖 sudo apt-get install build-essential cmake git libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev sudo apt-get install python-dev python-numpy python3-dev python3-numpy sudo apt-get install libtbb2 libtbb-dev libjpeg-dev l…...

编程日记 2024/2/19 17:55:04

【Linux】软件包管理器 yum | vim编辑器

前言: 软件包管理器 yum和vim编辑器讲解 文章目录 软件包管理器 yum编辑器-vim四种模式普通模式批量化注释和批量化去注释末行模式临时文件 软件包管理器 yum yum&#xff08;Yellowdog Updater, Modified&#xff09;是一个在基于 RPM&#xff08;管理软件包的格式和工具集合&…...

编程日记 2024/2/19 17:53:02

vue常见问题

文章目录 data为什么是一个函数&#xff0c;而不是一个对象&#xff1f;什么情况下可以使用对象&#xff1f;key的作用&#xff0c;为什么不能用Index&#xff1f;render函数&#xff0c;h函数&#xff0c;和template什么关系&#xff1f;vue 是怎么解析template的? template会…...

编程日记 2024/2/19 17:51:00

ArcgisForJS基础

文章目录 0.引言1.第一个ArcgisForJS应用程序1.1.安装部署ArcgisForJS1.2.实现ArcgisForJS应用程序 2.开发与调试工具2.1.集成开发环境2.2.调试工具2.3.Firebug 0.引言 ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调…...

编程日记 2024/2/19 17:49:59

白话微机：5.解释串行接口以及一些考研面试问题

一. 前言&#xff08;回顾世界观&#xff09; 很久很久以前&#xff0c;有这样一个世界&#xff0c;这个世界有着现实世界一样的元素&#xff1a;那里的人又有一个别的名字叫做“数据”&#xff0c;人有0有1&#xff1b;人们也有住房&#xff0c;这些住房在这个世界叫做“存储器…...

编程日记 2024/2/19 17:45:56

版本控制(Git)

Fork 本课程网站的仓库 将版本历史可视化并进行探索是谁最后修改了 README.md文件&#xff1f;&#xff08;提示&#xff1a;使用 git log 命令并添加合适的参数&#xff09;最后一次修改_config.yml 文件中 collections: 行时的提交信息是什么&#xff1f;&#xff08;提示&am…...

编程日记 2024/2/19 17:43:54

USB-C音频转接器：实现边充电边听歌的新选择 | LDR6020P

随着科技浪潮的推进&#xff0c;Type-C接口已逐渐成为电子设备的主流选择&#xff0c;以其正反随意插、高速传输和强大功能等独特优势&#xff0c;在日常生活中占据越来越重要的地位。而Type-C音频转接器&#xff0c;作为连接Type-C接口与音频设备的桥梁&#xff0c;正引领着音…...

编程日记 2024/2/19 17:40:50