用HTML5实现动画

学习&实践爱好者

已于 2024-02-15 14:05:29 修改

阅读量7.6k

点赞数 20

分类专栏： JavaScrip技术 HTML5与CSS3 文章标签： html5 前端

于 2024-02-15 09:15:57 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/136118232

版权

用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文件