:active状态

当我们给元素添加:active伪类时，电脑中当鼠标按下该元素的时会触发这个状态，但是在手机上却不会，比如下面这个例子：

电脑上，您可以直接点击二维码打开Demo，手机则扫描二维码进行访问：

上面的例子在电脑上有active状态是肯定的，但是手机访问却没有这个状态，并且还有一层半透明的层覆盖在上面，这种用户体验实在是太差了。

手机添加:active状态

首先，需要把链接在移动端上默认的一层半透明的层删掉，这个给所有的a标签添加一个：

-webkit-tap-highlight-color: rgba(0,0,0,0);

引言

不知道你是否遇到过这种情况：当发现某些东西可以允许你很大胆的使用CSS3的时候(比如CSS3中的线性渐变)，你可能就会什么都不想的写了一大堆的CSS3的代码，不管什么前缀都加上去(除非你用框架)，然后每一种前缀后面的值写的都是一样的，最后在各个高端浏览器或者在手机上测试的时候，可能会出现不同的效果，甚至没有效果，这是为什么呢？这篇文章或许会解开你的一些迷惑。

linear-gradient标准语法

在W3C的官网上，标准语法是这样的定义的：

<linear-gradient> = linear-gradient(
	[ [ <angle> | to 

transitionend

所有添加了CSS3动画的元素都会有一个Transitionend事件，顾名思义，也就是当前元素的CSS3动画完成的时候执行一些操作。

下面来看一个例子，一个元素，当鼠标移过它的时候，我们让它在1秒内使用CSS3从宽度100PX变到200PX，动画执行完成后，弹出一句话：

<div id="ani">
		
</div>

	window.onload = function(){
		var 

触屏

标准的触屏事件有以下几种：

• touchstart:当手指碰到屏幕的时候触发
• touchmove:当手指在屏幕滑动时触发
• touchend:当手指离开屏幕时触发
• touchcancel:当一次触摸事件被中断时触发

触屏事件对象包含的一些常用属性：

• touches：记录当前触屏关键点的数组
• changedTouches:记录touches变化后关键点的数组

每一个touch点包含ClientX、ClientY、…

该Demo来自chris coyier的Animation of How CSS Triangles Work。

如果看不到Demo，则是被和谐了。

See the …

原文地址

http://css-tricks.com/using-svg/

什么是SVG?

svg是和种矢量图形格式，全拼是：Scalable Vector Graphics (就像AI中的矢量图一样)。在网页上使用SVG很简单，但是有一些东西是你需要知道的。

为什么要用SVG?

• 很小的文件格式
• 缩放到任意大小都不会失真(超小的情况除外)