CSS3 linear-gradient的方向(角度)问题

引言

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

linear-gradient标准语法

W3C的官网上,标准语法是这样的定义的:

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

关于transitionend

transitionend

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

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

<div id="ani">
		
</div>
	window.onload = function(){
		var 

Touch Event初探

触屏

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

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

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

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

每一个touch点包含ClientXClientY、…

CSS画三角形的动画演示

该Demo来自chris coyierAnimation of How CSS Triangles Work

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

See the …

[翻译]使用SVG

原文地址

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

什么是SVG?

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

为什么要用SVG?

  • 很小的文件格式
  • 缩放到任意大小都不会失真(超小的情况除外)
直接购买「JavaScript高级程序设计」

JavaScript高级程序设计

[美] 尼古拉斯·泽卡斯 著

一本包含了所有JavaScript知识的厚书。

直接购买「ES6标准入门」

ES6标准入门

阮一峰 著

前端越来越规范,JavaScript越来越规范了~

直接购买「CSS禅意花园」

CSS禅意花园

[美] Dave Shea / Molly E. Holzschlag 著

没错,就是这本「禅」书让我入的前端坑!

直接购买「CSS世界」

CSS世界

张鑫旭 著

不管你是新手还是资深开发,这本书里都会有你不知道的东西。