用HTML5实现动画

软件开发技术深度爱好者2024-02-18 15:33

用HTML5实现动画

要在HTML5中实现动画，可以使用以下几种方法：CSS动画、使用<canvas>元素和JavaScript来实现动画、使用JavaScript动画库。重点介绍前两种。

一、CSS 动画

CSS3 动画：使用CSS3的动画属性和关键帧（keyframes）来创建动画效果。通过定义动画的开始状态、结束状态和过渡效果，可以实现平滑的动画效果。

先看一个简单的例子：

html 复制代码 
<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，源码如下：

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，源码如下：

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 来实现动画

先看一个简单的例子：

html 复制代码 
<!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，源码如下：

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，源码如下：

javascript 复制代码 
    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。

源码如下：

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>
<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

相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
爱敲代码的小鱼6 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示