HTML5 中文网站

Canvas基础知识讲解（有演示案例）

小神仙 — Fri, 04 May 2012 10:51:46 GMT

讲解了那么多有关于Canvas标签应用的案例实验，发现自己忽略了一个非常重要的问题，那就是我一直没有说到Canvas的基础知识。虽然，Canvas不是一个非常复杂的标签，也没有那么多的属性，但是必要的基础知识和发展演变还是值得去说一说的。今天，我爱猫猫技术博客就为大家带来关于Canvas标签的基础知识。

以下是来自Operachina的译文：

HTML5规范引进了很多新特性，其中最令人期待的之一就是Canvas元素。HTML5 Canvas提供了通过JavaScript绘制图形的方法，此方法使用简单但功能强大。每一个Canvas元素都有一个“上下文(context)” (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个Canvas上下文，并通过不同的API提供图形绘制功能。

大部分的浏览器都支持2D Canvas上下文——包括Opera，Firefox，Konqueror和Safari。而且某些版本的Opera还支持3D Canvas，Firefox也可以通过插件形式支持 3D Canvas。

本文介绍主要介绍2D Canvas基础以及如何使用基本Canvas函数，如线条、形状、图像和文字等。为了理解此文章，你最好了解JavaScript基础知识。

下面开始我们的讲解：

canvas基础

创建Canvas的方法很简单，只需要在HTML页面中添加

为了能在JavaScript中引用Canvas，最好给它设置ID ；也需要给Canvas设定高度和宽度。

要在Canvas画布中绘制图形需要使用JavaScript。首先通过getElementById函数找到Canvas元素，然后初始化上下文，之后可以使用上下文API绘制各种图形。下面的脚本可以在Canvas中绘制一个矩形：

    var elem = document.getElementById('myCanvas');
    if (elem && elem.getContext) {
      var context = elem.getContext('2d');
      if (context) {
        context.fillRect(0, 0, 150, 100);
      }
    }

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

有关于Canvas绘制图形的文章有：《【HTML5】浅谈如何使用Canvas绘图》、《【HTML5】用Canvas标签绘制矩形》、《【HTML5】用Canvas绘制圆形》、《【HTML5】Canvas练习之绘制向日葵》。

2D context API

介绍了如何创建Canvas后，让我们来看看2D Canvas API，看看能用这些函数做些什么。

在上面的例子中，我们展示了绘制矩形是多么简单，而通过fillStyle和strokeStyle属性可以更轻松的设置矩形的填充和线条。颜色值使用方法和CSS一样：十六进制数、rgb()、rgba() 和hsla()。

通过fillRect可以绘制带填充的矩形；使用strokeRect可以绘制只有边框没有填充的矩形。如果想清除部分Canvas可以使用clearRect。上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。

下面将是一个综合实例的JavaScript脚本：

    context.fillStyle   = '#00f';
    context.strokeStyle = '#f00';
    context.lineWidth   = 4;
    context.fillRect  (0,   0, 150, 50);
    context.strokeRect(0,  60, 150, 50);
    context.clearRect (30, 25,  90, 60);
    context.strokeRect(30, 25,  90, 60);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

有关于Canvas 2D的文章有：《【HTML5】Canvas的画线技巧》。

路径

通过Canvas路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用fill和stroke即可添加填充或者设置边框。调用 closePath()结束自定义图形绘制。

下面是一个绘制三角的案例的JavaScript脚本：

    context.fillStyle   = '#00f';
    context.strokeStyle = '#f00';
    context.lineWidth   = 4;
    context.beginPath();
    context.moveTo(10, 10);
    context.lineTo(100, 10);
    context.lineTo(10, 100);
    context.lineTo(10, 10);
    context.fill();
    context.stroke();
    context.closePath();

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

有关于Canvas路径的文章有：《【HTML5】Canvas坐标变换与路径结合使用实验》。

插入图像

drawImage方法允许在Canvas中插入其他图像(img和Canvas元素) 。在Opera中可以在Canvas中绘制SVG图形。此方法比较复杂，可以有3个、5个或9个参数：

3个参数：最基本的drawImage使用方法。一个参数指定图像位置，另两个参数设置图像在Canvas中的位置。

5个参数：中级的drawImage使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。

9个参数：最复杂drawImage杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。

下面是上述三个使用方法的例子：

    context.drawImage(img_elem, dx, dy);
    context.drawImage(img_elem, dx, dy, dw, dh);
    context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

像素级操作

2D Context API提供了三个方法用于像素级操作：createImageData，getImageData和putImageData。

ImageData对象保存了图像像素值。每个对象有三个属性: width,height和data。data属性类型为CanvasPixelArray，用于储存width*height*4个像素值。每一个像素有RGB值和透明度alpha值(其值为0至255，包括alpha在内。)。像素的顺序从左至右，从上到下，按行存储。

来看一个例子：

    var imgd = context.createImageData(50,50);
    var pix = imgd.data;
    for (var i = 0; n = pix.length, i < n; i += 4) {
      pix[i  ] = 255;
      pix[i+3] = 127;
    }
    context.putImageData(imgd, 0,0);

注意: 不是所有浏览器都实现了createImageData。在支持的浏览器中，需要通过getImageData方法获取ImageData对象。

通过ImageData可以完成很多功能。如可以实现图像滤镜，或可以实现数学可视化 (如分形和其他特效)。来看一个实例：

    var imgd = context.getImageData(x, y width, height);
    var pix = imgd.data;
    for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i  ] = 255 - pix[i  ];
      pix[i+1] = 255 - pix[i+1];
      pix[i+2] = 255 - pix[i+2];
    }
    context.putImageData(imgd,x, y);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

有关于Canvas像素级的文章有：《【HTML5】Canvas像素级碰撞实验》。

文字

虽然最近的WebKit版本和Firefox 3.1 nightly build才开始支持Text API，为了保证文章完整性我决定仍在这里介绍文字API。

context对象可以设置以下text属性：

font：文字字体，同CSS font-family属性；

textAlign：文字水平对齐方式。可取属性值: start,end,left,right,center。默认值：start；

textBaseline：文字竖直对齐方式。可取属性值：top,hanging,middle,alphabetic,ideographic,bottom。默认值：alphabetic。

有两个方法可以绘制文字：fillText和strokeText。第一个绘制带fillStyle填充的文字，后者绘制只有 strokeStyle边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y)坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。

文字对齐属性影响文字与设置的(x,y)坐标的相对位置。

    ontext.fillStyle    = '#00f';
    context.font         = 'italic 30px sans-serif';
    context.textBaseline = 'top';
    context.fillText  ('Hello world!', 0, 0);
    context.font         = 'bold 30px sans-serif';
    context.strokeText('Hello world!', 0, 50);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

阴影

目前只有Konqueror和Firefox 3.1 nightly build支持Shadows API。API的属性为：

shadowColor：阴影颜色。其值和CSS颜色值一致。

shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和Photoshop的高斯模糊滤镜相同。

shadowOffsetX和shadowOffsetY：阴影的x和y偏移量，单位是像素。

    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.shadowBlur    = 4;
    context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
    context.fillStyle     = '#00f';
    context.fillRect(20, 20, 150, 100);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

颜色渐变

除了CSS颜色， fillStyle和strokeStyle属性可以设置为CanvasGradient对象。——通过CanvasGradient可以为线条和填充使用颜色渐变。

欲创建CanvasGradient对象，可以使用两个方法：createLinearGradient和createRadialGradient。前者创建线性颜色渐变，后者创建圆形颜色渐变。

创建颜色渐变对象后，可以使用对象的addColorStop方法添加颜色中间值。

下面的代码演示了颜色渐变使用方法：

    var gradient1 = context.createLinearGradient(sx,sy,dx,dy);
    gradient1.addColorStop(0,   '#f00');
    gradient1.addColorStop(0.5, '#ff0');
    gradient1.addColorStop(1,   '#00f');
    var gradient2 = context.createRadialGradient(sx,sy,sr,dx,dy, dr);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

有关于Canvas颜色渐变的文章有：《【HTML5】Canvas线性渐变的图形绘制实验》、《【HTML5】用Canvas绘制径向渐变图形》、《【HTML5】使用Canvas绘制坐标变换图形》。

小结

Canvas是HTML5最让人期待的特性之一，目前已获得大部分Web浏览器支持Canvas可以帮助创建游戏、增强图形用户界面。2D context API提供大量图形绘制功能——我希望通过本文你了解了Canvas使用，并且你有兴趣了解更多

本文来源：我爱猫猫技术博客
原文链接：http://www.52maomao.info/html5-canvas-basics.html

HTML5实现的Loading缓冲效果

小神仙 — Fri, 04 May 2012 10:37:47 GMT

HTML5在移动设备上表现，相信已经不用我多说了，干掉了Flash之后，它已经坐上了移动应用程序的第一把交椅。几乎所有稍微高端一点的设备（乔帮主的iPad，iPhone和Andriod的平板手机等）的浏览器都支持HTML5，而且据权威人士测试，这些支持HTML5的设备对Canvas标签的支持也是相当的好。

大家都知道Web2.0以来，应用程序的实现使用了大量Ajax，而Loading的小图标也有很多，甚至还有专门提供Loading图片的网站，所以我就想能不能让HTML5一并解决这个以前用gif文件才能解决的问题。出乎我意料的是，实现的过程非常简单，只用了不到一小时的时间我就用HTML5实验出了两个Loading效果，而且这样做出来的Loading图标是可定制的，既可以定制颜色，也可以定制大小等属性。

第一个带着小尾巴转动的loading图标画图的思路是，首先画一个圆，然后在圆的边上按顺序画大小逐渐减小的小圆点，在每次刷新画布时改变这一系列的小圆点在大圆边上的位置。

这里是案例的演示代码：

演示地址:http://f200-8.bbs.hexun.com/e/111219/loading.htm

第二个较为简单，在一个圆环上有一个相同圆心相同半径的圆弧在不停的转动。画图的步骤是首先画一个圆环，然后画一个不同颜色相同圆心半径的圆弧，在每次刷新画布时改变圆弧的起始角度。

这里是案例的演示代码：

演示地址:http://f200-8.bbs.hexun.com/e/111219/loading2.htm

目前从移动设备对HTML5的支持来看，HTML5将来必定大有可为。

天下大势，合久必分，分久必和。PC开发时Web应用在很大程度上统一了客户端程序；而现在移动开发使用不同的系统不同的语言，将来大多数应用必然会统一到一种语言，这种语言必然是html5加Javascript。

注意：由于目前支持HTML5的浏览器还不是很多，请各位在查看演示案例的时候使用Firefox10或者Oprea11等高版本浏览器。

本文来源：我爱猫猫技术博客
原文链接：http://www.52maomao.info/html5-loading.html

CSS3和jQuery动态时钟制作过程

小神仙 — Thu, 03 May 2012 23:19:57 GMT

本文译自Old School Clock with CSS3 and jQuery，主要讲述了如何利用CSS3和jQuery制作一个漂亮的动态时钟。

Hi，大家好，我叫Toby Pitman，Chris曾邀请我写一篇关于最近我在论坛上发的一些实验成果，于是当我在WebKit blog和saw an article上看一些新的CSS3动画时，有一个rotate属性深深地吸引了我的眼球，于是就开始着手写这篇文章了。我当时就在思考什么东西可以在网页上旋转呢（貌似GIF动画图片可以），于是我有个点子--是的，时钟不就是可以旋转的吗！开始！

CSS3 Transform:rotate

Transform:rotate是CSS3的一个新特性，它可以让你...当然，是实现一些旋转的玩意儿啦。Transform也可以让你在网页上实现缩放、倾斜、移动对象。而且上面的这些都可以通过Transition属性实现动画效果。

听起来很熟悉么？是的，当然，和以前一样，我们将依然结合jQuery来实现页面上元素的动画效果。因为使用jQuery可以方便的操作CSS从而得到动画效果。联想一下a:hover效果，你就会对如何实现这个例子产生一些想法。它远没有jQuery和Mootools那么强大，但已经足够做一些很酷的东西了。

请注意：这个时钟例子只能运行在Firefox 3.1+、Safari 3+和Chrome浏览器上。

时钟图片

首先，我们需要准备一些图片来作为时钟的图形界面。这里我们用一张钟盘图片和三张指针图片，其中运动的指针我们是用photoshop切割出来的600×30的图片，并将其竖直放置。然后利用rotate属性让其绕中心点旋转。当然，指针使用的是透明的PNG格式图片。

HTML标记

这个时钟的HTML标记非常简单，只用了ul列表，每一个列表项（li）分别对应着3根运动指针，并且给其分配相应的id，代码如下：

CSS代码

#clock {
        position: relative;
        width: 600px;
        height: 600px;
        margin: 20px auto 0 auto;
        background: url(clockface.jpg);
        list-style: none;
}
 
#sec, #min, #hour {
        position: absolute;
        width: 30px;
        height: 600px;
        top: 0px;
        left: 285px;
}
 
#sec {
        background: url(sechand.png);
        z-index: 3;
}
 
#min {
        background: url(minhand.png);
        z-index: 2;
}
 
#hour {
        background: url(hourhand.png);
        z-index: 1;
}

CSS代码也是非常简单，由于3根运动指针尺寸相同，并且是从同一个位置开始运动，所以我们为了简化代码就将它们的代码写在一起了。为了能让时钟内部的指针实现绝对定位（absolutely position）我们将ul设成相对定位（relativeposition）。

好了，下面我们的jQuery就要上场了。

The jQuery JavaScript

这里Javascript主要完成以下工作：

获取当前的时间
计算并添加每个元素的CSS样式（旋转角度）
周期性地设置CSS样式

获取时间

你也许会将PHP中的时间和日期等同起来，刚开始的时候我的第一想法也是利用PHP，然而后来我发现javascript中也有构造日期和时间的功能函数。只是需要注意的是javascript获取的是本地时间并不是服务器时间。

首先我将用Date()函数获取日期信息并将其赋给一个变量，我们可以通过GetSeconds(), GetMinutes()或GetHours()获取3根指针的信息，如下代码：

var seconds = new Date().getSeconds();

上面的代码会返回一个0到59的数字并将其分配给seconds变量。

获取角度

接下来我将计算每根指针的角度。我们将每一周分成60等分，所以只要360/60就得到每一份是6，这意味着每一秒钟或者每一分钟指针都将前进6度的角度。我们将计算结果保存到另一个变量中去，代码如下：

var sdegree = seconds * 6;

对于时针的情况有点不同，因为每一个周期是12等分的，所以每小时时针前进的角度是30度：360/12=30。既然这样如果时针按这个增量运动那就简单了，可是却不是这么简单的。它要根据分针的值运动一小段距离，比如3:30的话时针会在3和4的中间，然而我们该如何来做呢，请看下面的代码：

var hdegree = hours * 30 + (mins / 2);

基本上我们需要在hour后面加上分钟数除以2的值，该值在0.5到29.5之间（rotate属性支持浮点小数值）。

例如：

2.40 将得到:		2 * 30	=	60 degrees
	+	40 / 2	=	20 degrees
		---------	---	----------
		hdegree	=	80 degrees

设置样式

下面是CSS3 rotate的CSS样式表代码：

#sec {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
}

这里我们改用jQuery来动态添加上面的样式：

$("#sec").css({"-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"});

这里我们的一个问题是如何将'sdegree'变量替换样式表中的45deg，可以这样做：

var srotate = "rotate(" + sdegree + "deg)";

jquery代码就修改成如下：

$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

将所有代码整合起来

所有的jQuery代码如下：

$(document).ready(function() {
 
      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";
 
      $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
 
      }, 1000 );
 
      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";
 
      $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
 
      }, 1000 );
 
      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";
 
      $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
 
      }, 1000 );
 
});

请注意这里我们用了Javascript中的setInterval函数，这个函数每秒钟都会执行一次。一些获取时间的变量也在这个函数中，所以每次调用都会自动更新时间值。

这样，我们的时钟就可以工作了。

在线实例

HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

小神仙 — Thu, 03 May 2012 20:16:56 GMT

HTML5正在变得越来越流行。在这个移动设备日益增长的时代，对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近，Adobe宣布Flash将不再支持移动设备。这意味着，Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。

HTML的一大劣势就是对于多媒体技术支持的缺乏。在HTML中，你无法直接显示一个视频或在屏幕上绘画。在HTML5中，随着与

在这篇文章中，我仅将最新的

这里我选择了一个比较简单的动画：

PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！

分三种方式实现：

(1) canvas元素结合JS

(2) 纯粹的CSS3动画（暂不被所有主流浏览器支持，比如IE）

(3) CSS3结合Jquery实现

知道如何使用CSS3动画比知道如何使用

让我们从Canvas开始

HTML代码：


   
      
         Animation in HTML5 using the canvas element

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.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;
		}

页面加载的初始化方法：

//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);	//同样的，第二个
		   
		}

画轮胎：

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();

		}

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

该是CSS3出场了

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

HTML代码：


   
      
      Animations in HTML5 using CSS3 animations

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代码并无不同）：


   
      
      Animations in HTML5 using CSS3 animations

CSS:

JS代码：

首先引入在线API：

实现动画代码（相当简洁）：

简单讲解：prefix首先识别出当前是哪个定义被采用了（-o?-moz?-webkit?-ms?），然后定义了动画的起点位置和终点位置。接着，定义了设置旋转角度的函数（该函数将在在动画的每一步(step)中执行）。然后，定义了一个动画，该定义方式导致了无限自循环调用！

本文，通过一个简单的动画实例，演示了HTML5下，实现动画的几种常见方式。

源码下载

来源：http://blog.csdn.net/yanghua_kobe/article/details/7226816

HTML5 Canvas创建可交互的Bubble Chart

小神仙 — Tue, 17 Apr 2012 22:32:22 GMT

众所周知资讯图像一种使数据易于理解和充满娱乐性的方式。不同的人采用不同的方式使数据易于理解充满娱乐性，一些人通过充满创意的平面设计实现这个目标如打印资讯信息，另外也有一些人通过增加动画和交互性实现目标。软件工程师、研究者、业余设计师Josh Marinacci强烈推荐读者看Hans Rosling教授和一群富有想象力的人的TED会谈。这个会谈揭露了关于发展中国家的共同的神话。会谈中Rosling教授成功的关键是他采用一种非专业人士不能理解的方式渲染数据。他作品的核心是一个令人惊奇的Bubble Chart，可以随着时间的推移比较世界上的各个地区的数据信息。

Josh Marinacci也在其博客中详细地介绍了“如何利用HTML5 Canvas创建可以在移动桌面上运行的交互式图表以及如何利用真实数据填充图表。”下面让我们跟随作者学习如何创建我们自己的Bubble Chart。

准备工作：

需要知识：媒介HTML和JavaScript

需求：文本编辑器和现代浏览器

关于Bubble Chart

Bubble Chart就和它听起来一样是由气泡组成的图表，气泡实际上就是一些圆。但是Bubble Chart却能可视化五维数据，这也是其强大之处。每个气泡代表由 X和Y坐标定位的数据点，这和任何其他的线状图和散点图一样。可是每个气泡的大小和颜色属性可以表示另外两维的数据。如果我们动态显示图表，那么我们可以增加时间作为第五维数据。

尽管Bubble Chart的五个属性都可以代表任何类型的数据，但是实践中我们通常用X和Y坐标代表数字型数据，而气泡颜色这个属性用于区分两个不同的数据集。例如利用 X和Y分表代表儿童的“死亡数”和“受教育比例”，而气泡颜色代表不同的国家。气泡大小一般用来代表某种事物的数量如某个国家的人口。当动态显示图标时，第五维的坐标用来代表时间如表示从1960年到现在。仔细地创造性地使用这些气泡属性是创造出一个与众不同的资讯图标的关键。

利用模拟数据创建简单的图表

数据本身应该代表按照一定标准分组随着时间变化的数据点。假设数据由5格国家，20个时间点(从1980到2000年)的数据组成。每个数据点由x、y和大小三个属性组成。初始化这些模拟数据的代码如下：

var data = [];
for(var t=0; t<20; t++) {
    var cdata = [];
    data[t] = cdata;
    for(var country=0; country<5; country++) {
        cdata.push({
             x:50+Math.random()*500,
             y:50+Math.random()*300 ,
             size: 3+Math.random()*20,
             country: country});
     }
}

接下来在屏幕上用气泡描绘出这些数据，代码如下：

var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext(’2d’);
 
var colors = ["red","green","blue","yellow","orange"];
 
var time = 0;
function draw() {
   
    //bg and border
    ctx.fillStyle = ”white”;
    ctx.fillRect(0,0, canvas.width,canvas.height);
    ctx.strokeStyle = ”black”;
    ctx.strokeRect(0,0,canvas.width,canvas.height);
   
    //time indicator
    ctx.fillStyle = ”black”;
    ctx.fillText(“time “ + time, 10,20);
   
    //draw the data for the current time slice
    data[time].forEach(function(d) {
        ctx.save();
        ctx.fillStyle = colors[d.country%colors.length];
        ctx.globalAlpha = 0.5;
        ctx.beginPath();
        ctx.arc(d.x,d.y,d.size,0,Math.PI*2);
        ctx.fill();
        ctx.restore();
    });
   
}

上述代码用白色填充背景，利用Canvas边框作为背景的边界。然后描绘当前时间指示器，最后描绘数据本身。每个数据点都根据当前点的x、y和大小描绘成相应的圆。每个国家的颜色从定义的颜色列表中选取。

基本表如下：

为了增加表的时间属性，我们只需要用不同的时间变量重复调用描绘函数重复描绘即可。代码如下：

$(“#play”).click(function() {
    var animdraw = function() {
        draw();
        time++;
        if(time < data.length) {
            setTimeout(animdraw,100);
        } else {
            time = 0;
        }
    }
    animdraw();
});

获取“世界数据银行”的数据

至此已经创建了一个基本表。下面让我们利用一些真实的数据填充这个表让它更有意思。我们从“世界数据银行”选择需要的数据，它是一个庞大的组织，具有从UN和其他公开的数据源采集到的庞大的数据集。除了数据承载基地，它还有一个定制的报表生成器，它可以让你创建数据切片以支持多种格式的数据下载。

本文选择了“世界发展指标和全球发展金融”数据库。选择“东亚及太平洋地区”，“欧洲和中亚”，“拉丁美洲和加勒比地区”一些国家或地区作为集合，利用气泡的颜色属性表示不同的集合。选择“死亡率”、“人口密度”、“总人口”作为研究点，分别用x、y坐标以及气泡的大小属性表示。最后选择了时间变量。简单的点击“全选”按钮即可选择从1960年到现在以年为单位的数据变量。

现在我们已经选定了一份报告。点击“导出”按钮下载CSV文件格式的数据。我们可以利用Excel打开CSV文件查看从 “世界数据银行”所得到的这份报告的内容。如果你利用Excel打开下载的CSV文件，将看到每个国家或者地区都有三行组成，我们选择的每个变量都有一行。另外你可能看到早年的一些数据值并不存在，这意味着那几年并没有收集这些国家的数据。

解析CSV数据

如果你用Excel打开报告，它看起来只是一堆行。我们需要把数据解析成我们能用的形式。为了解析数据文件，我们需要 CSV解析程序。Josh Marinacci从Ben Nadel下载了一个解析程序，很好用。为了下载CSV文件并解析它Josh Marinacci使用AJAX调用jQuery。

$(“#load”).click(function() {
    $.ajax({
        url: ”data.csv”,
        context: document.body,
        success: function(c) {
            var csvdata = CSVToArray(c);
            console.log(“got to here “ + csvdata[1]);
        }
    });
}

CSV文件被解析成由许多行组成的文件，这些行可以继续进行子划分被划分成列。我们可以通过先列循环再行循环的方式处理CSV文件。

data = [];
 
//start at 9 to skip non-year columns and first few years
for(var t=9; t
注意上述代码是从第9列开始处理数据的，不仅跳过了数据不完整的的前几年的数据点也跳过了一些元数据(如国家名字等等)。处理行的时候每次循环是处理三行数据目的是通过一次循环可以处理一个国家或地区的数据。
如果仅仅按照这种方式处理数据，我们将什么都看不到。整个Canvas都被单一的颜色填充，这不是我们想要的结果。这是
因为数据并没有按比例进行适当的扩展。例如在1960年东亚和太平洋地区的人口是10亿。为了描绘图表需要按比例缩小这个值。为了适用于这些未修改的数据
在绘制图表的时Josh Marinacci使用了可扩展的功能。只需要采用如下方式改变弧度即可：

ctx.arc(
    d.x*6,
    canvas.height-d.y*2.5,
    d.size/(1000*1000*11),
    0,Math.PI*2
    );

上述代码修改了x、y和气泡大小的值适应Canvas。气泡大小必须除以1100万才能得到合理的气泡半径。Y值由Canvas高度减去y乘以2.5得到。Canvas的标准坐标系要从左上方开始以便被Canvas高度减去之后可以翻转y坐标。
修改数据变量的值是可以任意选取的，选择某个特定的值是为了让表格看起来比较美观。具体选择什么值依赖于正在描绘的数据。可以写一个程序分析数据寻找合理的参数值，比如通过计算每一个变量的最大值或者最小值。
表格看起来如下：


增加交互性

赋予表格时间这一点很好，增加表格的交互性实际上就是让图表阅读者通过点击不同的气泡获取更多的信息。由于Canvas
完全使用像素而不是我们需要的图形，这种图形使得通过程序我们可以计算哪一个图形被点击了。幸运地是Canvas中的气泡都是完美的圆，这将使事情容易很
多。我们只需要计算被点击点与气泡圆心的距离即可，如果距离小于半径就认为该气泡被点击。代码如下：

$(“#canvas”).mousedown(function(e) {
    displayInfo = false;
    data[time].forEach(function(d) {
        var x = d.x*6;
        var y = canvas.height-d.y*2.5;
        var radius = d.size/(1000*1000*11);
        var dis = dist(e.offsetX,e.offsetY,x,y);
        if(dis < radius) {
            displayInfo = true;
            displayCountry = d.country;
        }
    });
    draw();
});

如果读者已经点击了某个图形，显示信息的布尔值将变为“true”，保存当前的国家并触发重绘操作，同时在右上方通过代码嵌入一个小的信息板。
注意在重绘代码中填充的数据是来自于当前时间片而不是用户点击表格时的时间。这就意味着当表格被赋予时间属性之后显示的内容将更新以便用户可以看到随着时间变化的数据。

if(displayInfo) {
        ctx.save();
        ctx.translate(canvas.width-305,5);
        ctx.fillStyle = ”rgba(200,200,200,0.7)”;
        ctx.fillRect(0,0,300,100);
        ctx.strokeStyle = ”black”;
        ctx.lineWidth = 2;
        ctx.strokeRect(0,0,300,100);
       
        ctx.fillStyle = ”black”;
        var displayPoint = data[time][displayCountry];
        ctx.fillText(“Region: “ + regions[displayPoint.country],5,20);
        ctx.fillText(“Population Density: “ + displayPoint.x,5,20+20*1);
        ctx.fillText(“Mortality rate: “ + displayPoint.y,5,20+20*2);
        ctx.fillText(“Population: “ + displayPoint.size,5,20+20*3);
        ctx.restore();
    }

改变图表的视觉效果
一般而言图报表不应该有这么多的可视元素否则将减损数据的潜在表现性，但是选择一个完美的颜色和模式将产生巨大的差别。
为了让这个表看起来更好，Josh 
Marinacci给每个气泡增加了一层白色覆盖物使圆更加完美。同时也给每个圆增加一个黑色的边框并为每个集合选择不同的颜色。相对于计算每个气泡颜色
的渐变度Josh Marinacci采用先选择一个基本的颜色然后改变它的透明度的方式为每个不同的气泡选择颜色。

var radgrad = ctx.createRadialGradient(
        x-radius/10,y-radius/10,0,
        x-radius/10,y-radius/10,radius+30);
radgrad.addColorStop(0,   ’white’);
radgrad.addColorStop(0.5, ’white’);
radgrad.addColorStop(1,   ’rgba(255,255,255,0.3)’);
ctx.globalAlpha = 0.6;
ctx.fillStyle = radgrad;
 
ctx.fill();
为了使图表更加美观上述代码改变了字体增加了边框，使用了一个来自于Subtle Patterns网站充满娱乐性的背景。最终图表如下：


总结

上面就是创建Bubble Chart的基本过程。利用上面的基本图表你可以创建自己的Bubble Chart。你可以增加数据自动调整功能，让图表阅读者自己选择数据集合扩大或者缩小，你也可以在每个时间间隔中插入时间使时间划分更细，动态过程更流畅。
你可以从这获取工程源码，也可以从作者的个人网站JoshOnDesign.com获取
原文链接：
http://www.netmagazine.com/tutorials/create-interactive-bubble-chart-html5-canvas
译文来自：webapptrend
转载请保留

使用CSS3让文字按指定路径显示

小神仙 — Sat, 14 Apr 2012 21:38:49 GMT

之前，我们利用CSS只能让文字横平竖直地显示，连倾斜一个角度都不行，更不用说让一串文字按指定的路径轨迹显示了。但是，CSS3到来之后，这一切实现起来是那么的简单，我们可以利用CSS3的text-transform options: rotation, skew, matrix, transform-origin等属性来实现对文字的显示路径。下面是一个示例，支持CSS3的浏览器才能看出效果

欢迎关注HTML5中文网站

CSS代码如下：

HTML代码如下：


欢
迎
关
注
H
T
M
L
5
中
文
网
站

另外有一个网站可以让你生成这些按路径显示的文字的代码：http://csswarp.eleqtriq.com/

本文链接：http://www.itivy.com/html5/archive/2012/4/14/css3-text-path.html

纯CSS3制作的Windows 7开始菜单

小神仙 — Sat, 14 Apr 2012 15:53:43 GMT

我对使用少量CSS3代码来实现很多效果这一过程非常的着迷，很多UI元素都需要用图片来展示其漂亮的外观，但是你可能不知道，单纯的CSS3代码也是可以实现的。下面我就用纯CSS3来制作Windows 7开始菜单（额外需要几个小图标），从而来证明这个观点。

如果我们分解这个Windows 7开始菜单，我们会得到1个div，2个ul列表，1组链接以及一些icon小图标，我们可以一起来看看具体的效果。下面是简单的制作过程及部分代码

菜单容器（Container）

这个容器命名为startmenu ，里面包含了2个ul列表。同时用3种颜色实现线性渐变：顶部是浅蓝色，中间是深蓝色，底部是接近浅蓝色的其他颜色。接着用rgba()实现透明度，rgba()有四个参数，前3个表示红、绿、蓝，第4个表示透明度，两条边线使用了box-shadow属性。

#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
             -moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
             box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#619bb9;
             background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
             background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }

程序菜单（Programs Menu）

这是一个白色背景的ul列表，两条边线用了border和box-shadow属性。程序链接包含了几个小图标以及程序名称，同时做了一个鼠标滑过渐变投影的效果。

#programs, #links {float:left; display:block; padding:0; list-style:none;}
#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
            box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
            -moz-border-radius:3px;-webkit-border-radius:3px;}
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px; 
              color:#4b4b4b; text-decoration:none; min-width:220px;}
#programs a:hover {border:solid 1px #7da2ce; 
             -moz-border-radius:3px; -webkit-border-radius:3px;
             box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#cfe3fd;
             background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
             background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}

链接菜单（Link Menu）

上面提到的链接菜单非常简单，但是这里我们可以做出更炫的鼠标滑过效果。每一个链接菜单都有3种颜色的水平渐变：左边和右边是深蓝色，中间用稍微淡一点的蓝色。现在，不像程序菜单中的链接那样，这个链接内部用来包含菜单的文字，同时span元素还拥有多种垂直线性渐变。

#links {margin:7px; margin-top:-30px;}
#links li.icon {text-align:center;}
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
              color:#fff; text-decoration:none; min-width:120px;}
#links a:hover {border:solid 1px #000;
             -moz-border-radius:3px; -webkit-border-radius:3px;
             box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#658da0;
             background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
             background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384)); 
             }
#links a span { padding:5px; display:block; }
#links a:hover span  { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
            background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent), 
            color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }

下面是效果截图，你也可以去看在线示例和下载源码

这个CSS3制作的Windows 7开始菜单例子可以在Firefox 3.6+, Safari 和 Chrome浏览器中运行，Opera和IE中的效果就不行了，也许我可以继续优化一下，欢迎大家提出建议和意见。

本文译自：Create Windows 7 start menu using CSS3 only
译文链接：http://www.itivy.com/html5/archive/2012/4/14/css3-windows-7-start-menu.html
转载请保留，谢谢！

用css3制作Loading动画的几种方法

小神仙 — Thu, 12 Apr 2012 10:27:54 GMT

以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和 Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。

方案1，图片辅助

传统做法是直接用动态的GIF图片，这个方案是用PNG图片加上背景颜色来模拟静止的加载图片，然后利用css中的animation处理图片的旋转。相比传统方案，这个方案的好处是可以直接通过修改CSS来改变背景色，可以修改大小和旋转速度。如下是具体的CSS代码：

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
p#spinner {
  height: 30px;
  width: 30px;
  overflow: hidden;
  background: #000;
  -webkit-mask-image: url("data:image/png[...]");
  -webkit-mask-size: 30px 30px;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

具体效果查看这里：Demo1

这个方案，只有safari可以很好地支持。chrome下支持不是很好，所以这是一个不太成熟的方案。

方案2，纯CSS实现

方案的思路是，首先用css渲染12个静态的bar，每个bar间隔30度的角度，给每个bar添加背景变淡的动画，但是相邻bar的动画效果延迟1/12秒，来保证12个bar是按顺序变亮然后变暗。从而模拟出旋转的效果。

这个旋转效果是伪旋转，所有的bar都没有真正做到旋转。

@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}
div.spinner {
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-block;
}
div.spinner div {
    width: 20%;
    height: 40%;
    background: #000;
    position: absolute;
    left: 100%;
    top: 100%;
    opacity: 0;
    -webkit-animation: fade 1s linear infinite;
    -webkit-border-radius: 30px;
}
div.spinner div.bar1 {
    -webkit-transform:rotate(0deg) translate(0, -142%);
        -webkit-animation-delay: 0s;
}
[......]
div.spinner div.bar12 {
    -webkit-transform:rotate(330deg) translate(0, -142%); 
    -webkit-animation-delay: -0.0833s;
}

具体效果查看这里：Demo2

safari和chrome都能很好地渲染这个效果，并且也很容易定义实际大小，因为所有的bar的高度，宽度有是用百分比来定义的。缺点也很明显，需要定义12个bar，并且每个bar都要定义独立的css，相对来说html和css的代码量有点多。

方案3，这个方案类似sencha touch中实现的效果

方案的基本思想是：首先利用html和css呈现4个bar，再通过css的伪元素: before和：after定义每个bar的前后内容，这样使得由原始的4个bar产生12个bar的效果，其次通过css设置让12个bar的透明度逐渐递减，最后应用css3中旋转动画达到实际loading的效果。

.x-loading-spinner {
    font-size: 250%;
    height: 1em;
    width: 1em;
    position: relative;
    -webkit-transform-origin: 0.5em 0.5em;
}
.x-loading-spinner > span, .x-loading-spinner > span:before, .x-loading-spinner > span:after {
    display: block;
    position: absolute;
    width: 0.1em;
    height: 0.25em;
    top: 0;
    -webkit-transform-origin: 0.05em 0.5em;
    -webkit-border-radius: 0.05em;
    border-radius: 0.05em;
    content: " ";
}
.x-loading-spinner > span.x-loading-top {
    background-color: rgba(170, 170, 170, 0.99);
}
.x-loading-spinner > span.x-loading-top::after {
    background-color: rgba(170, 170, 170, 0.9);
}
.x-loading-spinner > span.x-loading-left::before {
    background-color: rgba(170, 170, 170, 0.8);
}
.x-loading-spinner > span.x-loading-left {
    background-color: rgba(170, 170, 170, 0.7);
}
.x-loading-spinner > span.x-loading-left::after {
    background-color: rgba(170, 170, 170, 0.6);
}
.x-loading-spinner > span.x-loading-bottom::before {
    background-color: rgba(170, 170, 170, 0.5);
}
.x-loading-spinner > span.x-loading-bottom {
    background-color: rgba(170, 170, 170, 0.4);
}
.x-loading-spinner > span.x-loading-bottom::after {
    background-color: rgba(170, 170, 170, 0.35);
}
.x-loading-spinner > span.x-loading-right::before {
    background-color: rgba(170, 170, 170, 0.3);
}
.x-loading-spinner > span.x-loading-right {
    background-color: rgba(170, 170, 170, 0.25);
}
.x-loading-spinner > span.x-loading-right::after {
    background-color: rgba(170, 170, 170, 0.2);
}
.x-loading-spinner > span.x-loading-top::before {
    background-color: rgba(170, 170, 170, 0.15);
}
.x-loading-spinner > span {
    left: 50%;
    margin-left: -0.05em;
}
.x-loading-spinner > span.x-loading-top {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}
.x-loading-spinner > span.x-loading-right {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}
.x-loading-spinner > span.x-loading-bottom {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}
.x-loading-spinner > span.x-loading-left {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
}
.x-loading-spinner > span::before {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}
.x-loading-spinner > span::after {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}
.x-loading-spinner {
    -webkit-animation-name: x-loading-spinner-rotate;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
 
@-webkit-keyframes x-loading-spinner-rotate {
    from {
    -webkit-transform: rotate(30deg);
    }
    to {
    -webkit-transform: rotate(330deg);
    }
}

具体效果查看这里：Demo3

这个方案是3个方案中应用css技术最彻底的一个，html的代码最少，并且也真正做到了旋转效果。缺点是不易扩展，chrome浏览器支持不是很理想。

综上分析，方案1浏览器支持不好，但是实现简单，方案2的html代码太多，但扩展好，浏览器支持不错，方案3的扩展性不好，浏览器支持也不好，但是较好地利用了css的特性。

如果开发桌面web系统，推荐方案2，如果是mobile系统，则方案2和方案3各有优势。

文章来源：葡萄城控件技术团队博客

精彩的HTML5游戏大盘点

小神仙 — Wed, 11 Apr 2012 23:05:49 GMT

如今HTML5正在以惊人的速度发展，而HTML5游戏目前虽说没有太大的突破，但随着HTML5的广泛普及和其在移动领域的深入应用，相信HTML5游戏会成为网页游戏的一种趋势，毕竟HTML5和Flash相比与网页的融合性更强，开发更灵活。记得前些日子给大家报道过HTML5割绳子游戏（Cut The Rope），同时还记录了《Cut The Rope》 HTML 5版背后的开发故事，从中可以看出HTML5游戏的发展潜力真的非常大，尤其是现在的浏览器对HTML5的支持越来越好，性能也越来越强。接下来就分享一些比较精彩的HTML5游戏，希望大家会喜欢。

6、3D吃豆人
之前google的吃豆人游戏非常犀利，现在来了个3D版的吃豆人的，更是让人惊叹，这个游戏需要最新的chrome浏览器，因为要有WebGL支持。

上面的这些HTML5游戏都是比较精彩的，非常具有代表性，尤其是那个太空战机和最后一个3D吃豆人游戏，更是让人眼前一亮。希望HTML5游戏能发展得越来越好，能给用户出色的体验。本文就到这里了，转载请注明来源：http://www.itivy.com/html5/archive/2012/4/11/best-html5-game.html

漂亮的HTML5+CSS3表单大放送

小神仙 — Sat, 07 Apr 2012 22:09:32 GMT

表单在网页中是一种非常重要的元素，一个漂亮的表单能给用户带来不一样的体验。虽然我们可以通过JS和CSS将传统的HTML表单做得非常漂亮和实用，但是今天给大家推荐的几款HTML5表单和CSS3表单，相信能让你眼前一亮。

1、一个简洁大方的登录界面

这个HTML5登录表单是之前收藏在我的博客中的，有详细的制作过程，和一些参考代码。

2、集成滑动条、日历、取色器等常用功能的HTML5表单

这个HTML5表单也是之前收藏在博客中的，提供在线示例和源码下载

3.Have a Field Day with HTML5 Forms

4.Fun with HTML5 Forms

5.Styling a Simple Form using CSS3

6.Using CSS3 to style forms written in HTML5

7.Customizing web forms with CSS3 and WebKit

以上就是HTML5表单，最后3个是纯CSS3的表单，希望大家会喜欢。

转载请注明：http://www.itivy.com/html5/archive/2012/4/7/html5-css3-form.html

经典CSS3&HTML5表单，集成滑动条、日历、取色器等常用功能

小神仙 — Sat, 11 Feb 2012 10:43:41 GMT

这是一款非常经典的CSS3&HTML5表单，我之所以称之为经典，是因为在这个表单中集成了不少我们开发中常用的控件，比如Slider滑动条、数字框、日历、取色器、url地址框、email地址框，不像有些CSS3表单，纯粹是外观上比较迷人但功能却不是很丰富。就外观上而言，这个CSS3表单也非常不错，还算大气。

这个CSS3表单主要用到了Webforms2, Modernizr, jQuery UI以及其他的jQuery插件

在线示例 | 源码下载

表单来源：tutsplus
本文地址：http://www.itivy.com/html5/archive/2012/2/11/css3-html5-form.html

HTML5开发之HTML5全屏API详解

小神仙 — Thu, 09 Feb 2012 20:40:43 GMT

我们可以使用Javascript在部分浏览器中实现全屏功能，但是你不要以为HTML5全屏是一件多么神奇的东西，其实也和普通Javascript全屏一样，这里我们只是讨论一下HTML5全屏API的使用方法以及HTML5全屏API的使用技巧，原文如下：

一、说在前面的

其实只是一个新的 JavaScript API，让 HTML 元素可以实现全屏显示。不过，这已经足够让我们兴奋。具体是怎样呢？其实这个从 iOS 和 Safari 5.0 就已经可以用在上。看一下这个，在 iPhone 上访问 youku 上的一个视频：

我们可以点击中间这个大大的放映按钮，这里 iOS 里的 safari 会把影片全屏显示，使用的就是这个接口。只不过是 Safari 自己实现的接口。依然不是 W3C 标准。如下图：

二、FullScreen JavaScript API 具体使用

1、JavaScript API

FullScreen Javascript API 目前仍是草案，实现这个 API，更确切来说是具有这项功能的浏览器有：Chrome 15 / Firefox Nightly / Safari 5.1。对于 JS API 的前端调用，我们可以先看看下面的代码：

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen(); 

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C 提议
element.requestFullscreen();
document.exitFullscreen();

只有两个方法，在需要调用全屏的元素调用 requestFullscreen() 方法，在需要退出时对 document 调用 exitFullscreen() 这个 API。问题不大，只是命名上的不同。

只是，厂商前缀，各浏览器的实现和 W3C 不一致，代码又得写得跟屎一样。我特意把不同用颜色标注出来。绿色的是相同的点，红色的是不同的点。在这一点上倒觉得 W3C 有点奇怪。好不容易 Webkit 和 Mozilla 是一致的，何必改掉命名。既然发，为什么不把 request 发成 enter 与 exit 对应？！。无论如何，至少可以实现，目前 IE 仍没有决定要不要实现这个草案，Johndyer 这样说：“I have an email from a IE team member saying they are discussing it, but have not made any decisions. ” 。呃~

在这里吐槽也没什么用，我们返回正题。浏览器支持 fullscreenchange 事件。让你可以为全屏做更多事。官方草案没有多提，只是略过，这一段来自 Johndyer 的代码，使用的是 Mozilla 的提案，具体使用还需要具体对待：

// Webkit-base: element.onwebkitfullscreenchange
// Firefox: element.onmozfullscreenchange

// W3C Method:
element.addEventListener('fullscreenchange', function(e) {
    if (document.fullScreen) {
       /* make it look good for fullscreen */
    } else {
       /* return to the normal state in page */
    }
}, true);

2. CSS 选择器：:fullscreen / :fullscreen-ancestor

这两个选择器的作用是这样的：

:fullscreen – 当前全屏化的元素
:fullscreen-ancestor – 所有全屏化元素的祖先元素

对于 :fullscreen 还是比较好理解的，但对于 fullscreen-ancestor 要选出它的全家，而不仅仅是父节点，似乎不能理解其他使用。其实，看一下官方草案提供的 Demo 代码，就知道了：可以隐藏或者什么的。但为什么不把全屏的内容设置为最高级别置顶的元素呢？这一点 W3C 的选择似乎也比较另令想吐槽。看官方 CSS Demo 代码吧：

:fullscreen {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:2147483647;
  background:black;
  width:100%;
  height:100%;
}
/* If there is a fullscreen element that is not the root then
   we should hide the viewport scrollbar. */
:fullscreen-ancestor:root {
  overflow:hidden;
}
:fullscreen-ancestor {
  /* Ancestors of a fullscreen element should not induce stacking contexts
     that would prevent the fullscreen element from being on top. */
  z-index:auto;
  /* Ancestors of a fullscreen element should not be partially transparent,
     since that would apply to the fullscreen element and make the page visible
     behind it. It would also create a pseudo-stacking-context that would let content
     draw on top of the fullscreen element. */
  opacity:1;
  /* Ancestors of a fullscreen element should not apply SVG masking, clipping, or
     filtering, since that would affect the fullscreen element and create a pseudo-
     stacking context. */
  mask:none;
  clip:none;
  filter:none;
  transform:none;
}

3. HTML 标签属性: allowFullScreen

像 flash 使用的和可以设置是否允许全屏，现在这个特性同样可以应用于标签。只要添加 allowFullScreen 属性即可：

三、解决方案

一般来说，全屏主要应用还是在视频和游戏。当然，也可以实现像 Mac Lion 一样的全屏显示，就像 Preview.app，全屏的时候使用起来是非常爽的。游戏和视频可以使用 flash 来兼容旧的浏览器和不支持 fullScreen JavaScript API 的浏览器。像 Firefox Nightly( v10 会支持)，Chrome 15， Safari 5.1 可以使用 Johndyer 的 jQuery 插件：https://gist.github.com/1354468

四、总结

目前遇到的问题可能是：

IE 对这个功能的实现没有安排
全屏在 Mac 下是浏览器全屏还是内置实现的全屏？Chrome 实现的是 Lion 内置的全屏，而 Safari 本身实现的是浏览器自身的全屏。
安全问题，全屏下伪造一个系统登陆框？
是否所有元素都应该被全屏内容盖住？

似乎第 1 点和第 3 点是我们比较关注的，也需要去关注的。反而对于 API 的调用是比较简单的，不需要那么多思考。

引用 DEMO: Fullscreen JavaScript API

HTML5全屏API就介绍这里了，总结一点，HTML5全屏在移动设备上尤为重要，普通PC上说实在的用处不大。

CSS3中动画效果的应用

小神仙 — Wed, 08 Feb 2012 22:38:45 GMT

不少人都已经在用CSS3中的动画了，但很多仅仅用在某个元素的 hover上。其实，配合脚本的话，可以做到更多的动画效果，并且可以在很大程度上抛弃各种动画库。

先前一博客《用HTML5代替PPT》中，我的各种动画效果就完全使用了CSS3的动画效果而不再使用jQuery的动画了。

点击查看展示

设置CSS

*{
    -webkit-transition-duration:.15s;
    -moz-transition-duration:.15s;
    transition-duration:.15s;
    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
}

也就是设置了所有动画效果的持续时间为150毫秒，以及动画效果的样式为ease-out。

关于时间

根据我自己亲身实践，我能接受的动画效果时间是在150毫秒附近，再短觉得一闪而过，再长我就觉得拖沓冗余。这个150毫秒仅仅是经验参数，没有任何科学依据仅供各位参考。

但是这个也有例外，比如例子中幻灯片的翻页过程，由于幻灯片比较大，翻页过程如果时间太短，效果也不好。所以对于这种几乎整个页面变化的情况，我设置了动画时长为300毫秒，比通常的翻了一倍。甚至到400毫秒也没觉得冗长。所以一般对于面积较小的元素，动画效果维持在150毫秒左右，面积较大的动画，适当延长时间。

关于效果

动画效果我个人最喜欢ease-out，最不拖沓，有动感。其他效果看着总觉得恶心。比如linear看起来就很死板，而ease-in又感觉不伦不类。

关于是否使用*选择器

这个我已经另写博客阐述观点真的还需要reset.css么？

关于动画

这是针对所有元素的任何的CSS变动都会产生动画，包括背景色，边框色，宽度高度，内外边距的变化等等等等。实际上光颜色的动画改变就已经比jQuery默认效果强了，jQuery如果要实现颜色动画需要附加一个插件 jQuery Color

脚本产生动画

不仅仅是hover伪类其效果，任何通过脚本改变元素的CSS参数都会产生动画。为此，我在页面脚本一开始就加入

var page=window.location.hash.replace("#slide-","")||1;
$("#slides").css({"margin-top":(1080*(1-page))});

这段代码的作用就是通过地址栏的hash，来改变幻灯片的页数。你可以尝试访问这个页面，注意地址最后的hash部分：
http://shawphy.github.com/share/2010/presentation.html#slide-2
这个地址会直接把你带到第2页。

可以看到，代码中仅仅是设置了元素CSS的margin-top值，本身并没有动画，而由于先前的CSS设置，通过js改变margin-top值也会有动画效果，这种原生动画效果我不确定是不是会比js产生的效率高，我个人感觉在Firefox 4下动画效果很不流畅，但Chrome 下很流畅。因此一定程度上，未来可以放弃脚本库中的动画了。或者，甚至脚本库中也会运动CSS动画来实现功能。

缺点

不提供回调函数，不能按照顺序执行，又要使用大量setTimeout了，并非完全好主意。

原文：http://shawphy.com/2010/09/css3-animation.html

HTML5和CSS3登录页面制作实录

小神仙 — Tue, 07 Feb 2012 16:05:24 GMT

本文详细介绍使用HTML5 和CSS3 制作一个登录页面的完整过程。

View demo

     
        Log In 
         
             
             
         
         
             
            Forgot your password?Register

所用到的HTML 5的特性：

◆ placeholder – 输入框的简短提示，当该输入框获得输入焦点时，该提示信息自动消失

◆ required – 指定该输入元素是否必须提供

◆ autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点

◆ type=”password” – 指定密码输入(非HTML5专有)

CSS

在这里我们用到了 CSS3 的一些专有属性，包括：

Box-shadow 可以帮我们制作效果很好的边框阴影

    #login  
    {  
        box-shadow:  
              0 0 2px rgba(0, 0, 0, 0.2),  
              0 1px 1px rgba(0, 0, 0, .2),  
              0 3px 0 #fff,  
              0 4px 0 rgba(0, 0, 0, .2),  
              0 6px 0 #fff,  
              0 7px 0 rgba(0, 0, 0, .2);  
    }

Stitch effect (缝效果)

    #login  
    {  
        position: absolute;  
        z-index: 0;  
    }  
     
    #login:before  
    {  
        content: '';  
        position: absolute;  
        z-index: -1;  
        border: 1px dashed #ccc;  
        top: 5px;  
        bottom: 5px;  
        left: 5px;  
        right: 5px;  
        -moz-box-shadow: 0 0 0 1px #fff;  
        -webkit-box-shadow: 0 0 0 1px #fff;  
        box-shadow: 0 0 0 1px #fff;  
    }

Subtle gradient lines (微妙的渐变线)

    h1  
    {  
        text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);  
        text-transform: uppercase;  
        text-align: center;  
        color: #666;  
        margin: 0 0 30px 0;  
        letter-spacing: 4px;  
        font: normal 26px/1 Verdana, Helvetica;  
        position: relative;  
    }  
     
    h1:after, h1:before  
    {  
        background-color: #777;  
        content: "";  
        height: 1px;  
        position: absolute;  
        top: 15px;  
        width: 120px;  
    }  
     
    h1:after  
    {  
        background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));  
        background-image: -webkit-linear-gradient(left, #777, #fff);  
        background-image: -moz-linear-gradient(left, #777, #fff);  
        background-image: -ms-linear-gradient(left, #777, #fff);  
        background-image: -o-linear-gradient(left, #777, #fff);  
        background-image: linear-gradient(left, #777, #fff);  
        right: 0;  
    }  
     
    h1:before  
    {  
        background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));  
        background-image: -webkit-linear-gradient(right, #777, #fff);  
        background-image: -moz-linear-gradient(right, #777, #fff);  
        background-image: -ms-linear-gradient(right, #777, #fff);  
        background-image: -o-linear-gradient(right, #777, #fff);  
        background-image: linear-gradient(right, #777, #fff);  
        left: 0;  
    }

最终结果

View demo

结论

在一些老的浏览器上也表现不错，下图是在IE8下的效果：

原文：http://www.oschina.net/question/5189_28155

HTML5视频发展状况

小神仙 — Thu, 02 Feb 2012 14:14:32 GMT

注：这篇报告来自LongTail Video

HTML5已经进入了在线视频市场，这是一件激动人心的事情，同时也对工业开发者提出了挑战。随着HTML5规范和各种浏览器的不断改变，LongTail Video花费了大量的时间来弄清楚这一技术的本质，并且在各种浏览器以及设备上测试了播放效果，然后针对HTML5播放效果对产品进行了优化。

HTML5视频发展现状一文意在与其他的用户以及开发者分享HTML5所支持的技术以及无法实现的技术。

在JW Player开发过程中，我们执行了许多常规测试来检测当前在线视频的状况。这篇报告重点关注HTML5支持技术的当前状况，我们还将继续完善我们的产品，我们会将我们发现的最新结果向大家公布，希望大家能够从我们发现的结果中获得帮助，我们将测试的结果分成了几个主题。

随着HTML5视频的发展，这篇报告也会随着发生改变。如果一个浏览器或是设备添加了新的功能，我们将在这篇报告中补充相关内容。对于那些不常使用的HTML5视频功能也是一样。欢迎在Facebook上与我们讨论。

1.浏览器和设备的市场份额

首先分享的是浏览器和设备的市场份额统计数据，以及它们目前支持的模式。目前还难以给出一个准确的数据，因为两大数据提供商——StatCounter 和NetMarketShare给出的结果存在着很大的不同。不同地区的市场份额也存在着明显的差异。

下面是StatCounter在2011年11月给出的统计数据，桌面设备和移动设备占有了1%的市场份额：

已经有2/3的市场支持HTML5了。话虽如此，但是Flash还有它的生存空间。在桌面上，IE6/7/8占据了很大的市场份额（28%），并且这一情况还可能持续许多年。由于它不支持HTML5，像Flash这类替代技术还将存在在视频播放应用中。至于其他的浏览器，他们基本已经完全支持HTML5视频了。

移动手机和平板电脑在最近的几年里已经融合成了一个新的格局。目前，只有iOS和Android占有很大的市场份额。它们都支持HTML5视频。Android仍然支持Flash，但是它最近也宣布以后推出的手机将不再安装Flash插件。

目前最流行的设备（XBox, PS3, Apple TV, Roku）既不是web浏览器，也不是app markets。但随着Apple和Google新产品的推出，2012年这一格局将会有所改变。

2.媒体格式

HTML5最大的挑战之一就是对视频/音频格式的支持的断裂。以下就是HTML5模式的当前情况统计：

在Chrome官方宣布放弃MP4以后，MP4的支持情况将会急剧下降。但这一情况目前还难以预测。

iOS和Android只支持MP4视频。直到WebM解码器成为硬件并集成到手机中，这一情况还将困扰所有的移动设备。可以在WebM的博客上看到这一工作的最新进展情况。

每个浏览器支持添加多源下载的标签。我们的测试显示包含类型属性将阻止一些预下载，但是会破坏Android2.2的兼容性。在类型属性中设置编解码器不会影响任何的浏览器。

在我们的测试中，并没有包含Ogg视频格式。这一格式很少使用，并且质量也不如MP4和WebM。Firefox 3.6是现在唯一一个支持Ogg但是不支持WebM的浏览器，而它的市场份额正在急剧下降（2011年12月市场份额为5%）。

3. 标签属性

HTML5视频标签支持多种属性，并且大部分属性已经能够支持跨浏览器和设备访问了。除了宽度，高度外，还有：

Firefox目前尚不支持loop属性，但是其他的属性在桌面上可以使用。值得一提的是新的muted 属性目前应用并不广泛，但是我们预测它很快将被大量使用。

移动浏览器不支持preload，autoplay和muted，但是iOS5已经开始支持loop了。iOS4和iOS5的另一个区别就是iOS4总是使用多个请求预下载视频文件，而iOS5则不会预下载视频。

每个浏览器的视频控制看起来各有不同，但是它们都提供了相同的选项：一个播放/暂停开关，一个播放进度条和一个音量控制条。Safari还提供了2个额外的按钮：全屏和30秒回退。

移动设备上的视频控制与桌面浏览器有很大的不同：

在iPad上，视频控制还是非常相似的，只是它没有音量控制条（音量控制使用硬件按钮完成）。和Safari一样，它也有一个全屏按钮。
在iPhone上，在屏幕中间只有一个循环播放按钮。点击以后，视频将自动全屏播放。退出全屏模式以后，循环播放按钮重新出现。
Android2.2上，不会显示任何控制按键。这意味着，只能通过自定义的JavaScript代码播放视频。和iPhone一样，视频只能全屏播放。
在Android2.3上，有一个控制栏。必须点击播放按钮才能播放视频；直接点击视频画面并不会有任何响应。虽然比Android2.2有所改进，但是还是存在很多的UX问题。

4.全屏播放

可能最初你觉得全屏播放只是一个无关紧要的功能，但是它实际上是一个影响HTML5视频好坏的重要技术。全屏播放能够提升视觉体验并增加观看者的参与感。HTML5的全屏播放技术才刚刚起步，可以通过下面的表格进一步了解：

在许多的桌面浏览器中都使用了内置的控制机制实现全屏播放。Firefox使用右键菜单选项，而Safari则采用的是一个控制栏按钮。在移动设备上，全屏技术被广泛应用。iPad上总是有一个全屏开关，而iPhone/Android上的视频播放模式总是全屏的。

W3C最近正在开发一个全屏API标准。这个API可以将所有的HTML元素渲染成全屏模式，因此可以在视频中添加各种自定义控件。Safari和Chrome的最新版本已经支持这一API了。而Firefox 10也将引入该API。

用户显示器的长宽比与视频元素的大小通常并不匹配。因此，如何控制视频在屏幕上的布局至关重要。在iOS中，提供了一个内置的控件用于在视频原始大小和全屏播放模式间切换。Opera的 CSS3 object-fit 属性也是完成类似的功能的。在其他的浏览器中，视频总是根据屏幕的尺寸调整大小。

5.自适应流

自适应流是在线视频的一个核心组成部分。它能够实现：缓冲控制，流内质量调整，live/dvr以及密码和DRM安全机制。自适应流并不属于 HTML5标准，但是浏览器可以通过从HTML5的标签中下载控制表单实现这一功能。目前支持HTML5的平台中只有iOS 提供自适应流:

Safari/iOS已经支持Apple的HTTP Live Streaming协议了，而Android也准备支持HLS，但是这一协议还存在许多问题并且还太新，不足以广泛使用。MPEG DASH是由MPEG开发的一款协议，用于规范自适应流。它还是一个全新的协议，目前尚未得到任何浏览器的支持。

为了评测以及/或是规范自适应流的行为，必须制定相应的QOS标准。W3C/WhatWG考虑了一些协议，但目前为止，只有Firefox支持部分解析帧，解码和显示规范。

每个浏览器都支持使用HTTP 1.1范围请求寻找视频中尚未下载的部分。这减少了对自适应流的需要。

6.可访问性

由于HTML5对浏览器而言是native的，它在可用性方面比Flash这类插件更具优势。要让视频具有可访问性，它必须能够使用键盘控制，还必须使用封闭的字幕和视频描述渲染。后者可以使用HTML5 元素实现。以下的表格概述了不同浏览和设备上，HTML5对键盘和文本追踪的支持情况。

IE，Firefox和Opera上能够使用键盘控制HTML5视频元素。IE/Firefox考虑了所有的视频标签，使用空格控制视频的播放/暂停，通过左/右和上/下键控制进度和音量。Opera中可以使用tab键控制所有的控件。

尽管HTML5文本追踪正在积极发展，但目前还没有任何浏览器支持这一功能。尽管各个浏览器都推出了一些测试版支持标签。一旦浏览器正式支持文本追踪功能，我们将在报告中及时更新相关内容并提供更加丰富的测试用例。

HTML5视频规范定义了两种播放闭合字母的方法——视频元素字幕和描述。第一种方法使用多种内嵌的音频/视频/文本轨道播放影片。第二种使用多个或是元素实现同步播放。目前还没有浏览器实现这些方法。

英文原文：The State Of HTML5 Video
译文链接：http://www.webapptrend.com/2012/02/1613.html

X5内核+HTML5应用：Q立方浏览器预览版

小神仙 — Tue, 31 Jan 2012 23:57:16 GMT

Q立方浏览器是腾讯全新研发的不同于“手机QQ浏览器”的Android手机浏览器，Q立方浏览器搭载了腾讯基于优秀开源Webkit深度优化的“X5内核”，在web/wap页面打开速度、省流量、UI和多窗口交互方式、HTML 5等方面都与现有的手机QQ浏览器有不同之处，1.0预览版已经推出，虽然功能上还并不是很完善，但是可以看到很多新思路的雏形。

Q立方浏览器的初始UI给人的感觉不像一个浏览器，而像一个Android手机桌面，这或许也借鉴了Webqq那样的Web操作系统和腾讯开放平台的思路，将手机浏览器打造成一个手机上的网络操作系统，而后面将要介绍到的HTML 5应用也展露出了这种趋势的萌芽。

主页导航 Webapp市场

话归正传，看一下主页的设计，像一个手机的桌面一样分成了三个可以横向切换的屏幕，中间屏幕舍弃了导航图标与文字链导航这样许多主流浏览器都在采用的方式，直接以图标所替代，配合可更换的背景壁纸，清爽实用，非常贴近手机桌面的操作习惯。

搜索与传统导航页面

左屏专门用来搜索，提供以“网页、图片、音乐”等未分类的搜索方式，辅之以搜索热词排行榜，方便用户迅速了解近期的热门信息，搜索引擎皆可以多样化切换，而且去年热门的语音操作也加入其中。右屏则集成了基于HTML 5的Webapp应用市场。底部中央地球按钮则可以切换到传统的搜索栏、快速导航图标、热门网站文字链导航并存的传统主页。

独具个性的手势页面操作

由于基于Webkit优化的新内核X5的加入，网络良好的情况下页面的加载速度很令人满意，传统的wap版页面自然不在话下，对web页面的呈现也十分不错。

网页浏览效果

开启缩放控件可以实现页面的双指放大、缩小操作，即时实现对网页图片和文字等内容的尺寸和字号上的放大缩小操作，满足在有限的屏幕上阅览完整web网页的需求，不过经过这样的缩放操作后新页面并不能像UC那样自动重新排版、居中适应屏幕以获得最佳的阅读体验，还需要手动拖拽页面来实现。

缩放前后

个性的手势操作

通过页面右下角的“四叶草”图标可以调用多窗口管理模式，虽然没有华丽的切换特效，但是带完整内容的多窗口在切换上非常顺畅无滞留，点住页面向上或向下扔出去能够关闭该页面，但新建页面功能还无法在这个预览版上实现。

搭载国内首个HTML5应用市场

如前所述，Q立方手机浏览器还拥有WebApp Market，搭建了国内首个HTML 5应用市场，目前已经涵盖了资讯、社交、阅读、购物、工具、生活共6大类。这意味着使用该手机浏览器将无需下载安装一些客户端App，即可快速使用各类移动互联网应用。

除了该预览版中内置的几个常用热门应用，用户自然也可以到市场中下载更多应用，像Q+中的开放应用一样，无需安装客户端，点击“添加到桌面”即可快速使用。

Webapp市场

应用中不乏一些以往需要安装在手机上的读书或信息类客户端，Q立方的Webapp市场将其高度植入到一个浏览器中，快速使用而且包含了绝大部分客户端可以实现的功能，图为QQ小说和去哪儿网的app，可以看到阅读类的相关操作、酒店机票查询等应用已经可以在此实现。

实际应用

既然是突出HTML 5功能的X5内核，Q立方浏览器在HTML 5测试中丝毫不逊色，257的得分已经可以在目前的主流浏览器市场处于领先位置，但是由于预览版的功能限制，除了Webapp市场发挥了HTML 5的功能，视频方面还做不到实时观看。

HTML 5测试

编辑点评：

Q立方浏览器的推出表明腾讯在手机浏览器上对HTML 5支持、以及搭建国内首个HTML 5应用市场，为开发者、用户构建手机浏览器生态系统方面已经走在了行业前列。Webapp为我们提供了使用软件的全新方式，将腾讯开放平台的概念延伸至手机上来，浏览器本身也是以简洁实用高效为特色，出色的HTML 5分数表明了其内核的足够高效，随着对此版本的不断优化，正式版一定会更加出色。

来源：中关村在线

HTML5中容易被攻击的5个“漏洞”

小神仙 — Mon, 30 Jan 2012 10:18:36 GMT

在HTML5迅速崛起的同时，我们也不得不认识到HTML5给我们带来的安全问题，而且是不容小觑的安全问题。本文主要从劫持、跨域请求、桌面通知、地理定位、表单篡改这几个方面来分析了HTML5中不容忽视的几个安全“漏洞”，开发者要时刻警惕。

“虽然，HTML5对加强网站互动性的新功能有着一定的作用和贡献，但是对于不怀好意者，HTML5的“漏洞”更容易成为他们的攻击目标。”

因此，本文会从五个方面介绍HTML5易被攻击的方向，希望广大应用开发者能够在使用HTML5的同时注意这些“漏洞”并加以防范。

1、点击劫持变的更加容易：点击劫持本身不是种新的攻击，这种攻击的目的是窃取受害者的鼠标按钮点击，然后将点击定向到攻击者所指定的其他页面。攻击者的目的是让用户在不知情的情况下点击隐藏的链接。目前，对于点击劫持最好的服务器端防御措施之一是被称为Framekilling的技术。本质上来说，受到影响的网站可以利用JavaScript来验证自己是否在一个iframe中运行，如果是的话，就拒绝显示页面内容。这种技术已经被在用在 Facebook、 Gmail和其他一些网站中。但是HTML5在iframe中增加了一个新的沙盒属性，该属性会让网站停止执行JavaScript脚本。在大多数情况下，这其实是比较安全的做法，但也存在缺点，就是会抵消目前对点击劫持最好的防御措施。

2、利用跨域请求或WebSockets的端口扫描：有了HTML5，浏览器现在可以连到任何IP地址或网站的（几乎）任何端口。虽然除非目标网站有特别的允许，不然并不能接收到来自任意端口连接的回应，但是研究人员表示，这类请求所花的时间可以用来判断目标端口是打开的还是关闭的。因此攻击者就可以直接利用浏览器对受害者的内部网络进行端口扫描。

3、利用桌面通知做社会工程学攻击：HTML5有一个新功能——桌面通知。这些出现在浏览器之外的弹出窗口，其实是可以用HTML程序代码进行定制的。虽然这种功能带来了很不错的交互方式，但也可能导致社会工程学攻击，例如网络钓鱼或者假冒杀毒软件等。

4、利用地理定位追踪受害者：地理定位是HTML5新功能中最受注目的一个。因为安全和隐私的考虑，网站必须先得到用户的批准，随后才能获得位置讯息。然而就和以前出现过的其他功能一样，例如Vista的用户帐户控制，Android的应用程序权限，还有无效的HTTPS凭证等，这些需要用户作决定的安全措施几乎没有任何效果。而一旦有了授权，网站不仅可以知道受害者的位置，而且还可以在用户移动时对其进行实时追踪。

5、表单篡改：另一个新功能让攻击者可以在被注入JavaScript的网站（例如XSS攻击）中更改该网页上的表单行为。举例来说，攻击者可以改变一个网络商店的正常行为，不是将内容送到购买或是登录页面，而是将用户的身分认证信息发送到攻击者自己的网站。

以上5点HTML5漏洞对于开发者来说是比较致命的，所以我们在开发HTML5程序时要非常小心。尽管HTML5有这些安全问题，但我坚信HTML5依然是web的未来。

来源：互联网

CSS3 Transition属性的浏览器兼容测试

小神仙 — Sun, 22 Jan 2012 12:49:02 GMT

在《CSS3的Transition属性》一文中，我们具体讲解了关于CSS3的Transition属性的属性值及其用法，今天我们再来学习一下关于CSS3的Transition属性在各个浏览器的兼容情况。

由于CSS3在国内还不是很流行，所以国内的大部分浏览基本上都不支持CSS3，而且短时间内也没有大面积支持的势头；虽然CSS3在国际上的盛行度很大，各大浏览器厂商也正在努力的更新他们的浏览器，以求跟上HTML/CSS的更新节奏，但是首先要知道的是CSS3目前还不是一个完整的标准版本，它仍旧处于开发中，所以期待浏览器能够大部分支持CSS3属性，可能还要在等上一段时间！

补充一句：蛋疼的IE完全没有支持CSS3的念头，这不得不说是一个杯具。

因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE 全家都是不支持，另外由于各大现代浏览器Firefox，Safari，Chrome，Opera都还不支持W3C的标准写法，所以在应用 transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的 transition属性，那么这种效果就会自动加上去：

//Mozilla内核
//ease-out效果：
#ease-out {-moz-transition:all 5s ease-out 0s; -webkit-transition:all 5s ease-out 0s; -o-transition:all 5s ease-out 0s; transition:all 5s ease-out 0s; background:#636; }
//ease-in-out效果：
#ease-in-out {-moz-transition:all 1s ease-in-out 2s; -webkit-transition:all 1s ease-in-out 2s; -o-transition:all 1s ease-in-out 2s; transition:all 1s ease-in-out 2s; background:#3e6; }
//linear效果：
#linear {-moz-transition:all 6s linear 0s; -webkit-transition:all 6s linear 0s; -o-transition:all 6s linear 0s; transition:all 6s linear 0s; background:#999; }
//cubic-bezier效果：
#cubic-bezier {-moz-transition:all 4s cubic-bezier 1s; -webkit-transition:all 4s cubic-bezier 1s; -o-transition:all 4s cubic-bezier 1s; transition:all 4s cubic-bezier 1s; background:#6d6; }
//hover状态下或单击click按钮后demo-box产生属性变化
#timings-demo.timings-demo-hover .demo-box, #timings-demo:hover .demo-box {-moz-transform: rotate(360deg) scale(1.2); -webkit-transform:rotate(360deg) scale(1.2); -o-transform:rotate(360deg) scale(1.2); transform:rotate(360deg) scale(1.2); background:#369; border:1px solid rgba(255,230,255,08); -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; margin-left:280px; height:30px; line-height:30px; margin-bottom:15px; }

使用单击事件给dimings-demo加上一个timings-demo-hover的class名，使用demo-bxo产生属性变化：

$(document).ready(function(){
$(“#timings-demo-btn”).toggle(
function(){
$(this).next(“div#timings-demo”).addClass(“timings-demo-hover”);
},function(){
$(this).next(“div#timings-demo”).removeClass(“timings-demo-hover”);
});
});

效果图如下：

上图是鼠标移动到#timings-demo的div产生的效果变换示意图，你单击“click”按钮同样会产生上面的一个动画效应，为了节约空间，这里不在贴出示意图了。

到这里，关于CSS3的transition属性的属性解析及案例演示已经全部完成了。

结束语：CSS3的强大让人感到惊讶，也让人感到惊喜。关于CSS3的优秀，我想我已经不用多做介绍了，简简单单的几句代码就能够完成CSS2.0 之前必须用图片才能解决的事情是多么的令人振奋。我想作为前端工程师的我以及广大的前端程序员们，还等什么？赶紧使用CSS3吧，它会给你带来意想不到的精彩。

原文：http://www.52maomao.info/css3-transition-browser-compatibility.html

HTML5 3D斯诺克桌球在线游戏及源码下载

小神仙 — Sat, 21 Jan 2012 17:15:48 GMT

想必很多朋友都玩过QQ桌球游戏，如果你对斯诺克规则有一定的了解，那么你一定会对本文分享的HTML5 3D斯诺克桌球游戏感兴趣，因为那实在是太帅了。

之前，在王国峰的博客中有一篇译文对这个HTML5斯诺克桌球游戏的开发过程有一个非常详细精彩的解说，想学习HTML5知识的朋友可以去看原文HTML5斯诺克桌球俱乐部【译】。

当然，如果你只想体验一把HTML5斯诺克桌球游戏，那么你只需要使用chrome浏览器或者firefox最新版本就能在线玩这款桌球游戏。注意，击完一杆要稍微等一会儿才能继续下一杆。最后，如果你喜欢，也可以下载这款HTML5斯诺克桌球游戏的源代码，回去研究研究，HTML5的确非常强大，是web的未来。

在线游戏 | 源码下载

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/21/html5-snooker-play-and-code.html

CSS3中的Transition属性详解

小神仙 — Fri, 20 Jan 2012 22:18:02 GMT

W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

下面我们从最简单的语法和属性值开始一步一步来学习transition的具体使用：

语法：

transition ： [<'transition-property'> || <'transition-duration'> || 
<'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || 
<'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

transition主要包含四个属性值：执行变换的属性：transition-property；变换延续的时间：transition- duration；在延续时间段，变换的速率变化transition-timing-function；变换延迟时间transition- delay。下面分别来看这四个属性值：

一、transition-property：

语法：

transition-property ： none | all | [  ] [ ','  ]*

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）；当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。其对应的类型如下：

1、color：通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；

2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；

3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；

4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；

5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；

6、transform list：详情请参阅：《CSS3 Transform》。

7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；

8、visibility：离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility；

9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；

10、gradient：通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：background-image；

11、paint server (SVG)：只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似；

12、space-separated list of above：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；

13、a shorthand property：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。

具体什么CSS属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。这里需要提醒一点是，并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。

二、transition-duration：

语法：

transition-duration ：  [, ]*

transition-duration是用来指定元素转换过程的持续时间，取值：为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。

三、transition-timing-function：

语法：

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | 
cubic-bezier(, , , ) [, ease | linear | ease-in | 
ease-out | ease-in-out | cubic-bezier(, , , )]*

取值：

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)；

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；

6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default。

其他几个属性的示意图：

四、transition-delay:

语法：

transition-duration ：  [, ]*transition-delay ：  [, ]*

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，取值：为数值，单位为s（秒），它的使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。默认大小是”0″，也就是变换立即执行，没有延迟。

有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与 transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的怭值为 transition-duration第二个为transition-delay。如：

a {
-moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out; }
}

如果你想给元素执行所有transition效果的属性，那么我们还可以利用all属性值来操作，此时他们共享同样的延续时间以及速率变换方式，如：

a {
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

综合上述我们可以给transition一个速记法：transition: 如下图所示：

相对应的一个示例代码：

p {
-webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;
}

文章来源：W3CPlus.com