HTML5 Canvas动画效果演示

10款让人惊叹的html5动画效果这里介绍10款让人叹为观止的html5动画效果1、15种html5+css3图片堆叠图片展示特效这是一款html5和css3制作的图片堆叠图片展示特效，就像一幅扑克牌堆叠在一起，最开始只能看到一张，点击按钮后就会展开成几张，非常有意思。

2、html5 svg+css3制作图片边框运动动画效果一款使用html5 svg技术制作的图片边框运动动画效果，鼠标移动到图片上时，便会有几条线绕着边框运动，共有4种不同的效果。

建议使用Firefox或Chrome浏览器观看。

3、21种html5+css3鼠标悬停hover超链接导航条动画效果利用css3 transition属性制作的21种不同的鼠标悬停效果。

当鼠标hover或悬停在超链接上时，会触发各种动画效果。

每种动画效果都十分独特，可用于网站导航。

4、18种基于html5 svg和css3的神奇超链接动画效果普通的超链接效果是鼠标放上去出现一条下划线，本插件异想天开的使用html5 svg和css3打造出18种很神奇的超链接动画效果。

每种超链接动画效果都有它的独到之处。

5、html5+css3网格图片3d翻转Loading页面切换效果这是一个图片html5和css3制作的3d翻转Loading页面切换效果。

在页面上以网格的形式展示所有的页面缩略图，当点击了缩略图片后，图片进行3d翻转，然后加载相应的页面内容。

6、12种利用html5+css3打造的消息提示框效果这是12种风格各异的弹出消息提示框效果，使用html5和css3 animation属性制作，有各种旋转、翻转、伸展特效。

效果非常华丽。

7、15种html5 svg+css3制作的超酷响应式tab选项卡效果这是15种效果非常酷的tab选项卡效果，使用的技术分别是html5 svg，css 伪元素，css transitions，每种效果都带有过渡动画，并且是响应式的。

精选19款华丽的HTML5动画和实⽤案例下⾯是本⼈收集的19款超酷HTML5动画和实⽤案例，觉得不错，分享给⼤家。

1、HTML5 Canvas⽕焰喷射动画效果还记得以前分享过的⼀款HTML5烟花动画，今天我们要来分享⼀款类似的效果，⼀款基于HTML5 Canvas⽕焰喷射动画。

⽤⿏标拖动⼀条直线，直线长度表⽰⽕焰喷射的⼒度，另外，⽕焰在运动中还可以反射效果哦。

2、⽴⽅体旋转动画之前我们已经分享⼀款，可以切换⾄正⽅体的任意⼀⾯。

今天我们再来分享⼀款绚丽的HTML5 3D⽴⽅体旋转动画，这款⽴⽅体的⾊彩看上去⾮常艳丽，旋转起来的动画效果也⼗分流畅。

是⼀款很不错的HTML5 3D动画效果。

3、HTML5/CSS3实现⼤风车旋转动画这次我们要来分享⼀款很酷的HTML5动画，是⼀个可以旋转的⼤风车动画效果，回顾⼀下利⽤HTML5实现的旋转动画，我们可以看，它们的实现都是利⽤CSS3的transform:rotate属性，这款⼤风车动画的确⽐较厉害的。

4、HTML5⼩车动画很酷的HTML5吉普车有⼏天没有分享HTML5动画了，之前很多HTML5动画都是利⽤CSS3的⼀些特性和Canvas特性来完成，⽐如这个就利⽤CSS3的动画特性，就利⽤了HTML5 Canvas特性。

今天我们要分享⼀款利⽤HTML5/CSS3实现的吉普车动画，⼩车可以⽔平滚动，⾮常逼真。

5、纯CSS3 3D图⽚翻转展⽰图⽚3D阴影效果之前我们分享过⼀些HTML5图⽚3D效果，这篇⽂章中我们可以看到很多3D的图⽚特效。

今天我们再来分享⼀款利⽤纯CSS3实现的3D图⽚翻转展⽰特效，点击图⽚或者下⽅的翻页按钮即可选中相应的图⽚，并实现翻转展⽰效果。

6、HTML5摆动的⽂字特效类似柳枝摆动之前我们在上分享过⼀些HTML5⽂字特效，像这款，像这款都⾮常有特⾊。

今天我们来分享⼀款可以摆动的HTML5⽂字特效，⽂字垂直下垂，并可以在微风中微微摆动，就像春风中的柳枝⼀样。

如何使用JavaScript实现Canvas绘图和动画使用JavaScript来实现Canvas绘图和动画是一种常见的技术，它可以实现各种各样的图形效果和动态交互，非常适合用于创建各种类型的网页动画和游戏。

在本文中，我将详细介绍如何使用JavaScript来绘制图形、实现动画以及一些常用的绘图和动画效果。

一、构建Canvas元素为了开始绘制和动画，我们首先需要在HTML文档中创建一个Canvas元素。

Canvas是HTML5中新增的元素，它提供了一个绘制2D 图形的区域，我们可以通过JavaScript来操纵它。

在HTML文档的body标签中添加以下代码：```<canvas id="myCanvas" width="500" height="300"></canvas> ```上面的代码创建了一个id为myCanvas的Canvas元素，宽度为500像素，高度为300像素。

二、获取Canvas上下文要绘制图形或进行动画，我们需要获取Canvas的上下文对象。

在JavaScript中，我们可以使用`getContext()`方法来获取上下文对象。

在JavaScript中，使用以下代码获取Canvas上下文对象：```const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');```上面的代码通过`getElementById`方法获取了id为myCanvas的Canvas元素，然后通过`getContext`方法获取了2D上下文对象ctx。

三、绘制基本图形下面介绍如何使用JavaScript在Canvas上绘制一些基本图形，例如矩形、圆形和直线。

Canvas提供了一系列的API可以用于绘制图形。

惊艳的HTML5动画特效及源码今天我们要来分享⼀些很酷的HTML5动画演⽰，HTML5的强⼤之处在于它可以利⽤canvas的特性来绘制很多普通⽹页⽆法完成的图形和动画，canvas就像⼀块超级画板，在上⾯不仅可以实现平⾯图形，⽽且⼀些3D动画也⾮常简单。

很多HTML5动画也都基于canvas，⼀起来看看吧。

HTML5/CSS3实现⼤风车旋转动画作为今天⾸款HTML5动画，这款⼤风车旋转效果的确⾮常棒，它是⽤纯CSS3实现。

核⼼CSS代码：.wmd1{-webkit-transform: scale(.6);position:absolute;top:180px;left:200px;perspective: 1000px;}.base{ }.blades{width: 350px;height: 350px;left: 10%;top: 10%;z-index:2;border-radius: 50%;position: absolute;margin-top: -30px;margin-left: 50px;animation: spin 6s linear infinite;}.blade1 {background: white;position:absolute;width:41px;height:139px;top:-10px;left:150.5px;transform:rotate(0deg);display:inline-block;background:linear-gradient(135deg, transparent 20px, white 0),linear-gradient(225deg, transparent 20px, white 0),linear-gradient(315deg, transparent 20px, white 0),linear-gradient(45deg, transparent 20px, white 0);background-position: top left, top right, bottom right, bottom left;background-size: 50% 50%;background-repeat: no-repeat;}.blade2 {background:white;position:absolute;width:41px;height:139px;top:105.5px;left:41px;transform:rotate(-90deg);display:inline-block;background:linear-gradient(135deg, transparent 20px, white 0),linear-gradient(225deg, transparent 20px, white 0),linear-gradient(315deg, transparent 20px, white 0),linear-gradient(45deg, transparent 20px, white 0);background-position: top left, top right, bottom right, bottom left;background-size: 50% 50%;background-repeat: no-repeat;}.blade3 {background:white;position:absolute;width:41px;height:139px;top:105.5px;right:41px;transform:rotate(-270deg);display:inline-block;background:linear-gradient(135deg, transparent 20px, white 0),linear-gradient(225deg, transparent 20px, white 0),linear-gradient(315deg, transparent 20px, white 0),linear-gradient(45deg, transparent 20px, white 0);background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%;background-repeat: no-repeat;}.blade4 {background:white;position:absolute;width:41px;height:139px;bottom:-10px;left:150.5px;transform:rotate(180deg);display:inline-block;background:linear-gradient(135deg, transparent 20px, white 0),linear-gradient(225deg, transparent 20px, white 0),linear-gradient(315deg, transparent 20px, white 0),linear-gradient(45deg, transparent 20px, white 0);background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%;background-repeat: no-repeat;}.vane1{width:1px;height:350px;left:175px;background:white;position:absolute;transform:rotate(90deg);}.vane2{width:1px;height:350px;left:171.5px;background:white;position:absolute;transform:rotate(180deg);}.base .bottom_base{position:absolute;width:90px;height:100px;left:162px;border-right: 16px solid transparent;border-left: 16px solid transparent;border-bottom: 380px solid white;opacity:.8;z-index:-1;top:42.5px;}ul{position:absolute;top:180px;left:-30px;}li{width:10px;height:10px;background:white;padding:2px;display:block;margin: 30px;box-shadow: inset 0px -2px 0px lightgray;}li:nth-child(2){position:absolute;top:-45px;left:20px;}li:nth-child(1){position:absolute;top:35px;left:50px;}li:nth-child(3){position:absolute;top:75px;left:50px;}@keyframes spin {0% {transform:rotate(0deg);}100% {transform:rotate(-360deg);}}View Code纯CSS3 3D图⽚翻转展⽰这是⼀款基于CSS3的3D图⽚展⽰，在图⽚切换时将会有翻转的动画效果。

25款不得不说的html5+css3动画效果这25款动画效果分别使⽤了html5 svg、css3 transform、css3 transition、css3 animation等制作⽽成。

1、9种梦幻般的html5+css3 tooltip⿏标提⽰插件效果这个tooltip⿏标提⽰插件将带您离开黄底⿊字的html tooltip原始时代。

该插件共9种效果，使⽤html5 svg和css3 transform属性完成。

该tooltip带图⽚带动画，效果⼀流。

>>2、19种基于css3的超华丽模态窗⼝效果这是⼀款集19种模态窗⼝效果于⼀体的css3插件。

使⽤了css3 transition 和css3 animation属性。

某些模态窗⼝中还加⼊了3d透视效果。

>>3、在桌⾯和移动设备上展⽰响应式设计这个响应式设计展⽰了在不同设备的显⽰屏上⽹页的显⽰效果，这种响应式设计保证了在所有显⽰屏上获得最佳显⽰效果。

>>4、 html5 svg打开圣诞礼盒和下雪动画效果⼀款很炫的html5 svg打开圣诞礼盒和下雪动画效果。

点击礼盒后会飞出许多icon礼物，之后会有雪花从屏幕上⽅飘落。

>>5、html5 css3为移动设备设计的可⾃由伸缩的搜索框代码这是⼀个为移动设备设计的可⾃由伸缩的html5搜索框代码，使⽤css3 transition属性和少量的javascript完成。

>>6、 css3 transitions和伪元素制作4种超酷⿏标经过hover动画效果⼀款使⽤css3 transitions和伪元素制作的4种⿏标经过hover动画效果，4种⿏标经过hover动画效果分别是：滴⽔效果，圆⼼放⼤，旋转放⼤和飞翔的独眼怪。

>>7、13款html5 svg页⾯loading加载动画效果13款使⽤html5 svg技术打造的页⾯loading加载动画效果。

HTML5资料1Canvas教程<canvas>是一个新的用于通过脚本（通常是JavaScript）绘图的HTML元素。

例如，他可以用于绘图、制作图片的组合或者简单的动画（当然并不那么简单）。

It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations.1.1基本用法Basic usage<canvas>元素Let's start this tutorial by looking at the <canvas> element itself.让我们从<canvas>元素的定义开始吧。

<canvas id="tutorial" width="150" height="150"></canvas>This looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. <canvas>看起来很像<img>，唯一不同就是它不含 src 和 alt 属性。

The <canvas> element has only two attributes - width and height. These are both optional and can also be set using DOM properties or CSS rules.它只有两个属性，width 和 height，两个都是可选的，并且都可以 DOM 或者 CSS 来设置。

HTML5之Canvas绘图——使⽤Canvas绘制图形的基本教程HTML5⽕的正热，最近有个想法也是要⽤到HTML的相关功能，所以也要好好学习⼀把。

好好看了⼀下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了⼀下Canvas绘图，下边是⼏个实例，记下以备后⽤。

1、使⽤Canvas绘制直线：<!doctype html><html><head><meta charset="UTF-8"></head><style type="text/css">canvas{border:dashed 2px #CCC}</style><script type="text/javascript">function $$(id){return document.getElementById(id);}function pageLoad(){var can = $$('can');var cans = can.getContext('2d');cans.moveTo(20,30);//第⼀个起点cans.lineTo(120,90);//第⼆个点cans.lineTo(220,60);//第三个点（以第⼆个点为起点）cans.lineWidth=3;cans.strokeStyle = 'red';cans.stroke();}</script><body onload="pageLoad();"><canvas id="can" width="400px" height="300px">4</canvas></body></html>这⾥⽤到的两个API⽅法，moveTo和lineTo分别是线段的起点和终点坐标，变量为（X坐标,Y坐标）,strokeStyle、stroke分别路径绘制样式和绘制路径。

HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。

平移(translate)平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y)图示如下：任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移点坐标translate(x, y)。

代码演示：// translate is move the startpoint to centera and back to top left cornerfunction renderText(width, height, context) {context.translate(width/ 2, height / 2); // 中心点坐标为(0, 0)context.font="18px Arial";context.fillStyle="blue";context.fillText("Please Press <Esc> to Exit Game",5,50);context.translate(-width/2, -height/2); // 平移恢复(0,0)坐标为左上角context.fillText("I'm Back to Top",5,50);}放缩(Scale)Scale(a, b)意思是将对象沿着XY轴分别放缩至a*x, b*y大小。

效果如图示：// translation the rectangle.function drawPath(context) {context.translate(200,200);context.scale(2,2);// Scale twice size of original shapecontext.strokeStyle= "green";context.beginPath();context.moveTo(0,40);context.lineTo(80,40);context.lineTo(40,80);context.closePath();context.stroke();}旋转(rotate)旋转角度rotate(Math.PI/8)旋转前的坐标p(x, y)在对应的旋转后的坐标P(rx, ry)为Rx = x * cos(-angle) - y * sin(-angle);Ry = y * cos(-angle) + x * sin(-angle);旋转90度可以简化为：Rx = y;Ry = -x;Canvas中旋转默认的方向为顺时针方向。

h5动画效果案例H5动画效果案例H5动画是指运用HTML5技术创建的动画效果，通过使用canvas、css3、javascript等技术，可以实现各种各样的动画效果。

下面将介绍一个H5动画效果案例。

案例名称：炫彩粒子动画案例描述：该案例通过使用HTML5技术创建了一个炫彩粒子动画效果。

整个动画效果呈现出多个不规则的粒子从屏幕中心飞散，随机变换颜色并以较快的速度旋转。

同时，利用鼠标移动的事件，可以改变粒子的运动方向和速度，增加了互动性和趣味性。

案例实现步骤：1. 创建一个HTML文件，设置文档类型为HTML5。

在文档中引入必要的CSS和JavaScript文件。

2. 创建一个canvas元素，并设置其宽度和高度，以及背景颜色。

3. 在JavaScript文件中编写动画效果的逻辑代码：- 创建一个粒子类，包含粒子坐标、颜色、速度等属性，并定义粒子的绘制方法；- 创建一个粒子数组，用来存储所有粒子的实例；- 在动画循环中，对每个粒子进行更新和绘制操作，实现粒子的飞散效果；- 添加鼠标移动事件监听，根据鼠标移动的位置改变粒子的运动方向和速度。

4. 在初始化函数中，创建指定数量的粒子实例，并随机生成其初始位置、颜色和速度。

5. 在HTML文件中添加一个容器元素，并将canvas元素添加到容器中。

6. 在浏览器中打开HTML文件，即可看到炫彩粒子动画效果。

案例效果展示：炫彩粒子在屏幕中心飞散，随机变换颜色并以较快的速度旋转。

当鼠标移动时，粒子的运动方向和速度会随之改变，增加了动画的趣味性和互动性。

案例优点：该案例通过使用HTML5技术创建了一个炫彩粒子动画效果，具有较强的视觉冲击力和趣味性。

动画效果流畅，响应速度快，体验良好。

案例应用场景：该动画效果可以应用于网页设计、广告宣传等领域，用来吸引用户的注意力，增加网页的艺术感和交互性。

同时也可以用来展示产品和服务，提升用户对品牌的认知和关注度。

总结：通过使用HTML5技术创建动画效果，可以实现各种各样的动画效果，为网页设计和广告宣传提供了新的可能性。

HTML5实现动画效果的⽅式汇总⼩编以⼀个运动的⼩车为例⼦，讲述了三种实现HTML5动画的⽅式，思路清晰，动画不仅仅是canvas，还有css3和javascript.通过合理的选择，来实现最优的实现。

PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！分三种⽅式实现：(1) canvas元素结合JS(2) 纯粹的CSS3动画（暂不被所有主流浏览器⽀持，⽐如IE）(3) CSS3结合Jquery实现知道如何使⽤CSS3动画⽐知道如何使⽤<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，⽐如CSS)，⽽我们使⽤canvas⾃定义画出来的效果却不能被优化。

原因⼜在于，浏览器使⽤的硬件主要取决于显卡的能⼒。

⽬前，浏览器没有给予我们直接访问显卡的权⼒，⽐如，每⼀个绘画操作都不得不在浏览器中先调⽤某些函数。

1.canvashtml代码：复制代码代码如下:<html><head><meta charset="UTF-8" /><title>Animation in HTML5 using the canvas element</title></head><body onload="init();"><canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas><div id="controls"><button type="button" onclick="speed(-0.1);">Slower</button><button type="button" onclick="play(this);">Play</button><button type="button" onclick="speed(+0.1)">Faster</button></div></body></html>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是⼀个buttonif(ani){ //如果ani不为null，则代表我们当前已经有了⼀个动画clearInterval(ani); //所以我们需要清除它(停⽌动画)ani=null;s.innerHTML='Play'; //重命名该按钮为“播放”}else{ani=setInterval(drawCanvas,40); //我们将设置动画为25fps[帧每秒]，40/1000，即为⼆⼗五分之⼀s.innerHTML='Pause'; //重命名该按钮为“暂停”}}加速，减速，通过以下⽅法，改变移动距离的⼤⼩来实现：复制代码代码如下:function speed(delta){var newRate=Math.max(rate+delta,0.1);dx=newRate/rate*dx;rate=newRate;}页⾯加载的初始化⽅法：//initfunction 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); //同样的，第⼆个}画轮胎：复制代码代码如下:function 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();}由于原理简单，并且代码中作了详细注释，这⾥就不⼀⼀讲解！2.CSS3你将看到我们未通过⼀句JS代码就完全实现了和上⾯⼀样的动画效果：HTML代码：复制代码代码如下:<html><head><meta charset="UTF-8" /><title>Animations in HTML5 using CSS3 animations</title></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><footer></footer></body></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;}3.JQuery与CSS3这是⼀个效果与兼容性俱佳的⽅式（特别对于IE9暂不⽀持CSS3⽽⾔）HTML代码（可以看到与CSS3中的HTML代码并⽆不同）：复制代码代码如下:<html><head><meta charset="UTF-8" /><title>Animations in HTML5 using CSS3 animations</title></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><footer></footer></body></html>CSS:<style>body{padding:0;margin:0;}#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轴)*/}/*车⾝*/#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;-o-transform:rotate(0deg); /*旋转(单位：度)*/-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);}#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;}</style>JS代码：⾸先引⼊在线API：复制代码代码如下:<script src="https:///ajax/libs/jquery/1.7.1/jquery.min.js"></script>实现动画代码（相当简洁）：复制代码代码如下:<script>$(function(){var rot=0;var prefix=$('.tire').css('-o-transform')?'-o-transform':($('.tire').css('-ms-transform')?'-ms-transform':($('.tire').css('-moz-transform')?'-moz-transform':($('.tire').css('-webkit-transform')?'-webkit-transform':'transform')));var origin={ /*设置我们的起始点*/left:-400};var animation={ /*该动画由jQuery执⾏*/left:1600 /*设置我们将移动到的最终位置*/};var rotate=function(){ /*该⽅法将被旋转的轮⼦调⽤*/rot+=2;$('.tire').css(prefix,'rotate('+rot+'deg)');};var options={ /*将要被jQuery使⽤的参数*/easing:'linear', /*指定速度，此处只是线性，即为匀速*/duration:10000, /*指定动画持续时间*/complete:function(){$('#car').css(origin).animate(animation,options);},step:rotate};plete();});</script>简单讲解：prefix⾸先识别出当前是哪个定义被采⽤了（-o?-moz?-webkit?-ms?），然后定义了动画的起点位置和终点位置。