用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 screen
    canvas.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 body
        ctx.fillStyle = 'orange';
        ctx.fillRect(x, y, width, height);

        // Draw wheels
        const 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 wheel
            ctx.beginPath();
            ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2);
            ctx.fillStyle = 'blue';
            ctx.fill();

            // Draw spokes
            ctx.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 ground
        ctx.fillStyle = 'green';
        ctx.fillRect(0, canvas.height - 50, canvas.width, 50);

        // Update wheel rotation
        car.wheelRotation += 0.05;

        // Draw car
        drawCar(car.x, car.y, car.width, car.height, car.wheelRadius, car.wheelOffset, car.wheelRotation);

        // Move car
        car.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 screen
    canvas.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 body
        ctx.fillStyle = 'orange';
        ctx.fillRect(x, y, width, height);

        // Draw wheels
        const 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 wheel
            ctx.beginPath();
            ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2);
            ctx.fillStyle = 'blue';
            ctx.fill();

            // Draw spokes
            ctx.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 ground
        ctx.fillStyle = 'green';
        ctx.fillRect(0, canvas.height - 50, canvas.width, 50);

        // Update wheel rotation
        car.wheelRotation += 0.05;

        // Draw car
        drawCar(car.x, car.y, car.width, car.height, car.wheelRadius, car.wheelOffset, car.wheelRotation);

        // Move car
        car.x += car.speed;
        if (car.x > canvas.width) {
            car.x = -car.width;
        }

        if (!isPaused) {
            requestAnimationFrame(animate);
        }
    }

    // Button event listeners
    document.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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/389010.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ATT汇编入门[0] hello world

ATT汇编入门[0] hello world

文章目录 写在前面寄存器使用语法指令后缀寻址方式 系统调用示例程序 写在前面 x86汇编有intel和AT&T两种语法&#xff0c;网上资料使用intel语法的相对多一些&#xff0c;但是在linux平台的GNU汇编器用的是AT&T语法&#xff0c;本篇记录一下AT&T格式汇编程序的he…
阅读更多...
Kotlin基本语法3集合

Kotlin基本语法3集合

1.List集合 1.1 只读List fun main() {val list listOf("Jason", "Jack", "Jacky")println(list.getOrElse(3){"Unknown"})println(list.getOrNull(3)?:"Unknown") } 1.2 可变List fun main() {val mutableList mutabl…
阅读更多...
电商+支付双系统项目------设计数据库

电商+支付双系统项目------设计数据库

这篇文章将详细介绍电商支付双系统项目的数据库设计。数据库在该项目中扮演着至关重要的角色&#xff0c;它负责存储和管理用户信息、商品数据、订单记录以及支付交易等关键数据。通过精心设计和优化数据库结构&#xff0c;可以实现高效的数据存储和检索&#xff0c;确保系统的…
阅读更多...
如何查看Apple Watch的步数？这里提供几个方法

如何查看Apple Watch的步数？这里提供几个方法

所有Apple Watch都配有内置计步器，即具有步进跟踪功能。当你第一次设置手表时，你的Apple Watch将自动开始计算步数。让我们看看如何在Apple Watch上查看步数。​ 使用活动应用程序 1、按下Apple Watch上的数字皇冠，打开应用程序屏幕。 2、点击活动应用程序。 3、你会看到…
阅读更多...
书生浦语大模型实战营-课程笔记（3）

书生浦语大模型实战营-课程笔记（3）

本节课主要是跟着教程做的&#xff0c;操作的东西放到作业里记录了。 这里主要记录一些视频里讲的非操作性的东西。 RAG外挂知识库&#xff1f;优点是成本低&#xff0c;不用重新训练 RAG的一个整体流程。 涉及了文本相似度匹配&#xff0c;是不是和传统的问答系统&#xff0…
阅读更多...
VueCLI核心知识4：动画效果、过渡效果

VueCLI核心知识4：动画效果、过渡效果

1 动画效果 【代码】 <template><div><button click"isShow !isShow">显示/隐藏</button><!-- <transition name"xxx" :appear"true"> 可以指定name属性&#xff0c;也可以不指定&#xff0c;name属性在有…
阅读更多...
GAN生成对抗性网络

GAN生成对抗性网络

一、GAN原理 出发点&#xff1a;机器学习中生成模型的问题 无监督学习是机器学习和未来人工智能的突破点&#xff0c;生成模型是无监督学习的关键部分 特点&#xff1a; 不需要MCMC或者变分贝叶斯等复杂的手段&#xff0c;只需要在G和D中对应的多层感知机中运行反向传播或者…
阅读更多...
红队打靶练习:HACK ME PLEASE: 1

红队打靶练习:HACK ME PLEASE: 1

信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.61.128 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.61.2 00:50:56:f0:df:20 …
阅读更多...
[BIZ] - 1.金融交易系统特点

[BIZ] - 1.金融交易系统特点

1. 典型数据汇总 数据 说明 新增数据量(条/天) Qps(条/s) 消息大小(Byte) 实时性 可丢失性 可恢复性 实时行情 1.使用场景&#xff1a;交易&#xff0c;报价&#xff0c;策略验证&#xff1b; 2.冷热分离&#xff1a;彭博行情/其他行情&#xff1b;黄金&期货行情/…
阅读更多...
Panalog 日志审计系统 libres_syn_delete.php 前台RCE漏洞复现

Panalog 日志审计系统 libres_syn_delete.php 前台RCE漏洞复现

0x01 产品简介 Panalog是一款日志审计系统，方便用户统一集中监控、管理在网的海量设备。 0x02 漏洞概述 Panalog日志审计系统 libres_syn_delete.php接口处存在远程命令执行漏洞，攻击者可执行任意命令，接管服务器权限。 0x03 影响范围 version <= MARS r10p1Free 0…
阅读更多...
【教3妹学编程-算法题】将数组分成最小总代价的子数组 II

【教3妹学编程-算法题】将数组分成最小总代价的子数组 II

2哥 : 叮铃铃&#xff0c;3妹&#xff0c;过年干嘛呢&#xff0c;是不是逛吃逛吃&#xff0c;有没有长胖呢。 3妹&#xff1a;切&#xff0c;我妈张罗着要给我相亲呢。 2哥 : 相亲&#xff1f;哈哈哈哈 3妹&#xff1a;别笑了&#xff0c;我妈说跟我年龄相等的人都已经孩子上小…
阅读更多...
iptables防火墙、filter表控制、扩展匹配、使用iptables配置网络型防火墙、NAT原理、配置SNAT

iptables防火墙、filter表控制、扩展匹配、使用iptables配置网络型防火墙、NAT原理、配置SNAT

目录 iptables 防火墙filter表 filter中的三条链 环境准备 iptables操作 验证FORWARD链 准备环境 配置FORWARD链 NAT 配置SNAT iptables iptables有多种功能&#xff0c;每一种功能都用一张表来实现最常用的功能是防火墙和NAT从RHEL7开始&#xff0c;默认的防火墙为…
阅读更多...
.NET Core WebAPI中使用swagger版本控制，添加注释

.NET Core WebAPI中使用swagger版本控制，添加注释

一、效果 二、实现步骤 在代码中添加注释 在项目属性中生成API文档 在Program中注册Swagger服务并配置文档信息 // 添加swagger注释 builder.Services.AddSwaggerGen(x > {x.SwaggerDoc("v1", new OpenApiInfo { Title "Swagger标题", Version "…
阅读更多...
STM32F1 - 中断系统

STM32F1 - 中断系统

Interrupt 1> 硬件框图2> NVIC 中断管理3> EXTI 中断管理3.1> EXTI与NVIC3.2> EXTI内部框图 4> 外部中断实验4.1> 实验概述4.2> 程序设计 5> 总结 1> 硬件框图 NVIC&#xff1a;Nested Vectored Interrupt Controller【嵌套向量中断控制器】 管理…
阅读更多...
springboot192中国陕西民俗网

springboot192中国陕西民俗网

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的中国陕西民俗网 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取…
阅读更多...
蓝桥杯：C++排列与组合

蓝桥杯：C++排列与组合

排列是暴力枚举时的常见操作。有以下两种情况。 C的 next_permutation()是全排列函数&#xff0c;只能输出序列中所有元素的全排列。 本节将给出手写排列和组合的代码。因为在很多场合中不能使用系统自带的排列函数&#xff0c;所以需要自己编写。 全排列函数&#xff1a;nex…
阅读更多...
《合成孔径雷达成像算法与实现》Figure6.18

《合成孔径雷达成像算法与实现》Figure6.18

% rho_r c/(2*Fr)而不是rho_r c/(2*Bw) % Hsrcf exp函数里忘记乘pi了 clc clear close all参数设置 距离向参数设置 R_eta_c 20e3; % 景中心斜距 Tr 2.5e-6; % 发射脉冲时宽 Kr 20e12; % 距离向调频率 alpha_os_r 1.2; …
阅读更多...
如何使用六图一表七种武器

如何使用六图一表七种武器

六图一表七种武器用于质量管理&#xff1a; 描述当遇到问题时应该用那张图来解决&#xff1a; 一、如果题目说出了质量问题需要找原因&#xff1f; 解&#xff1a;用因果图&#xff0c;因果图也称石川图或鱼骨图 二、如果要判断过程是否稳定受控&#xff1f; 解&#xff1a…
阅读更多...
【zabbix】（五）-自定义监控项：MySQL主从状态-自动告警

【zabbix】（五）-自定义监控项：MySQL主从状态-自动告警

一 查看主从状态 二 在zabbix-agent端配置监控脚本 2.1 首先定义监控项 [rootmysql-112 conf]# mysql -uroot -pLXYlxy2:024.#8u} -e "show slave status\G" | grep -w Slave_IO_Running | awk {print $2} mysql: [Warning] Using a password on the command line…
阅读更多...
UI设计常见风格（1）：一文读懂九个，教你如何辨识。

UI设计常见风格（1）：一文读懂九个，教你如何辨识。

Hello&#xff0c;我是大千UI工场&#xff0c;设计风格是我们新开辟的栏目&#xff0c;上次讲了毛玻璃风格、辨识方法、应用场景、运用方法等&#xff0c;很受大家欢迎&#xff0c;本次带来常见的风格及辨识&#xff0c;让大家有个总览&#xff0c;以后会逐个讲解的&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站