HTML如何实现动画

小编给大家分享一下HTML如何实现动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

方法一：canvas

HTML代码部分：

                                     Your browser does not support the -element.Please think about updating your brower!       
          Slower          Play      Faster       
     

js代码部分：

var dx=5,          //当前速率             rate=1,         //当前播放速度             ani,            //当前动画循环             c,              //画图(Canvas Context)             w,              //汽车[隐藏的](Canvas Context)             grassHeight=130,        //背景高度             carAlpha=0,         //轮胎的旋转角度             carX=-400,          //x轴方向上汽车的位置(将被改变)             carY=300,           //y轴方向上汽车的位置(将保持为常量)             carWidth=400,       //汽车的宽度             carHeight=130,      //汽车的高度             tiresDelta=15,      //从一个轮胎到最接近的汽车底盘的距离             axisDelta=20,       //汽车底部底盘的轴与轮胎的距离             radius=60;          //轮胎的半径

我们在实例化汽车的时候 canvas 会被隐藏，那么我们做了下面这个步骤：

(function(){            var car=document.createElement('canvas');    //创建元素            car.height=carHeight+axisDelta+radius;   //设置高度            car.width=carWidth;              //设置宽度            w=car.getContext('2d');         })();

之后我们进行点击Play，在通过指定重复执行"画汽车"操作，来模拟"帧播放"功能代码如下所示：

function play(s){               //参数s是一个button            if(ani){                 //如果ani不为null，则代表我们当前已经有了一个动画               clearInterval(ani);           //所以我们需要清除它(停止动画)               ani=null;               s[xss_clean]='Play';           //重命名该按钮为"播放"            }else{               ani=setInterval(drawCanvas,40);       //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一              s[xss_clean]='Pause';          //重命名该按钮为"暂停"            }         }

加速，减速，通过以下方法，改变移动距离的大小来实现：

function speed(delta){            var newRate=Math.max(rate+delta,0.1);            dx=newRate/rate*dx;            rate=newRate;         }

页面加载的初始化方法：

//init             function init(){            c=document.getElementById('canvas').getContext('2d');            drawCanvas();         }

主调方法：

function drawCanvas(){            c.clearRect(0,0,c.canvas.width, c.canvas.height);    //清除Canvas(已显示的)，避免产生错误            c.save();                        //保存当前坐标值以及状态，对应的类似"push"操作    drawGrass();                     //画背景       c.translate(carX,0);                 //移动起点坐标       drawCar();                       //画汽车(隐藏的canvas)       c.drawImage(w.canvas,0,carY);            //画最终显示的汽车       c.restore();                     //恢复Canvas的状态，对应的是类似"pop"操作       carX+=dx;                        //重置汽车在X轴方向的位置，以模拟向前走       carAlpha+=dx/radius;                 //按比例增加轮胎角度       if(carX>c.canvas.width){              //设置某些定期的边界条件          carX=-carWidth-10;                //也可以将速度反向为dx*=-1;       }

画背景：

function drawGrass(){       //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标       var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);       //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色       grad.addColorStop(0,'#33CC00');       grad.addColorStop(1,'#66FF22');       c.fillStyle=grad;       c.lineWidth=0;       c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);    }

画车身:

function drawCar(){       w.clearRect(0,0,w.canvas.width,w.canvas.height);     //清空隐藏的画板       w.strokeStyle='#FF6600';                 //设置边框色       w.lineWidth=2;                       //设置边框的宽度，单位为像素       w.fillStyle='#FF9900';                   //设置填充色       w.beginPath();                       //开始绘制新路径       w.rect(0,0,carWidth,carHeight);              //绘制一个矩形       w.stroke();                          //画边框       w.fill();                            //填充背景       w.closePath();                       //关闭绘制的新路径       drawTire(tiresDelta+radius,carHeight+axisDelta);     //我们开始画第一个轮子       drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);    //同样的，第二个    }

画轮胎：

unction drawTire(x,y){       w.save();       w.translate(x,y);       w.rotate(carAlpha);       w.strokeStyle='#3300FF';       w.lineWidth=1;       w.fillStyle='#0099FF';       w.beginPath();       w.arc(0,0,radius,0,2*Math.PI,false);       w.fill();       w.closePath();       w.beginPath();       w.moveTo(radius,0);       w.lineTo(-radius,0);       w.stroke();       w.closePath();       w.beginPath();       w.moveTo(0,radius);       w.lineTo(0,-radius);       w.stroke();       w.closePath();       w.restore();    }

由于原理简单，并且代码中作了详细注释，这里就不一一讲解！

方法二：CSS3

你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果：

HTML代码：

CSS代码：

 body      {         padding:0;         margin:0;      }

定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）

 /定义动画：从-400px的位置移动到1600px的位置 /      @keyframes carAnimation      {         0% { left:-400px; }     /* 指定初始位置，0%等同于from*/         100% { left:1600px; }   /* 指定最终位置,100%等同于to*/      }/* Safari and Chrome */ @-webkit-keyframes carAnimation {    0% {left:-400px; }    100% {left:1600px; } } /* Firefox */ @-moz-keyframes carAnimation {    0% {left:-400; }    100% {left:1600px; }  } /*IE暂不支持,此处定义是为了向后兼容IE10*/ @-ms-keyframes carAnimation {    0% {left:-400px; }    100%{left:1600px; } }

 @keyframes tyreAnimation {    0% {transform: rotate(0); }    100% {transform: rotate(1800deg); } } @-webkit-keyframes tyreAnimation {    0% { -webkit-transform: rotate(0); }    100% { -webkit-transform: rotate(1800deg); } } @-moz-keyframes tyreAnimation {    0% { -moz-transform: rotate(0); }    100% { -moz-transform: rotate(1800deg); } } @-ms-keyframes tyreAnimation {    0% { -ms-transform: rotate(0); }    100% { -ms-transform: rotate(1800deg); } }

 #container {    position:relative;    width:100%;    height:600px;    overflow:hidden;        /*这个很重要*/ } #car {    position:absolute;      /*汽车在容器中采用绝对定位*/    width:400px;    height:210px;       /*汽车的总高度，包括轮胎和底盘*/    z-index:1;          /*让汽车在背景的上方*/    top:300px;          /*距顶端的距离(y轴)*/    left:50px;          /*距左侧的距离(x轴)*/    /*以下内容赋予该元素预先定义的动画及相关属性*/    -webkit-animation-name:carAnimation;        /*名称*/    -webkit-animation-duration:10s;         /*持续时间*/    -webkit-animation-iteration-count:infinite;     /*迭代次数-无限次*/    -webkit-animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/    -moz-animation-name:carAnimation;       /*名称*/    -moz-animation-duration:10s;            /*持续时间*/    -moz-animation-iteration-count:infinite;        /*迭代次数-无限次*/    -moz-animation-timing-function:linear;      /*播放动画时从头到尾都以相同的速度*/    -ms-animation-name:carAnimation;        /*名称*/    -ms-animation-duration:10s;         /*持续时间*/    -ms-animation-iteration-count:infinite;     /*迭代次数-无限次*/    -ms-animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/    animation-name:carAnimation;        /*名称*/    animation-duration:10s;         /*持续时间*/    animation-iteration-count:infinite;     /*迭代次数-无限次*/    animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/ }/*车身*/ #chassis {    position:absolute;    width:400px;    height:130px;    background:#FF9900;    border: 2px solid #FF6600; } /*轮胎*/ .tire {    z-index:1;          /*同上，轮胎也应置于背景的上方*/    position:absolute;    bottom:0;    border-radius:60px;     /*圆半径*/    height:120px;       /* 2*radius=height */    width:120px;        /* 2*radius=width */    background:#0099FF;     /*填充色*/    border:1px solid #3300FF;    -webkit-animation-name:tyreAnimation;    -webkit-animation-duration:10s;    -webkit-animation-iteration-count:infinite;    -webkit-animation-timing-function:linear;    -moz-animation-name:tyreAnimation;    -moz-animation-duration:10s;    -moz-animation-iteration-count:infinite;    -moz-animation-timing-function:linear;    -ms-animation-name:tyreAnimation;    -ms-animation-duration:10s;    -ms-animation-iteration-count:infinite;    -ms-animation-timing-function:linear;           animation-name:tyreAnimation;    animation-duration:10s;    animation-iteration-count:infinite;    animation-timing-function:linear; } #fronttire {    right:20px;     /*设置右边的轮胎距离边缘的距离为20*/ } #backtire {    left:20px;      /*设置左边的轮胎距离边缘的距离为20*/ } #grass {    position:absolute;  /*背景绝对定位在容器中*/    width:100%;    height:130px;    bottom:0;    /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */    background:linear-grdaient(bottom,#33CC00,#66FF22);    background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);    background:-moz-linear-gradient(bottom,#33CC00,#66FF22);    background:-ms-linear-gradient(bottom,#33CC00,#66FF22);  } .hr,.vr {    position:absolute;    background:#3300FF; } .hr {    height:1px;    width:100%;     /*轮胎的水平线*/    left:0;    top:60px; } .vr {    width:1px;    height:100%;    /*轮胎的垂直线*/    left:60px;    top:0; }

方法三：JQuery与CSS3

这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言）

HTML代码（可以看到与CSS3中的HTML代码并无不同）：

CSS: