CSS3笔记

DAY 01
CSS3选择器

一、基本选择器

1、回顾选择器
	通配符选择器、元素选择器、类选择器、ID选择器、后代选择器
	1.1 通配符选择器
	* { margin: 0; padding: 0; border: none;}
	1.2 元素选择器
	body { background: #eee; }
	1.3 类选择器
	.list { list-style: square; }
	1.4 ID选择器
	#list { width:500; margin: 0 auto; }
	1.5 后代选择器
	.list li { margin-top:10px; }

2、新增基本选择器
	子元素选择器、相邻兄弟选择器、通用兄弟选择器、群组选择器
	2.1 子元素选择器
		概念：子元素选择器只能选择某元素的子元素
		语法格式：父元素 > 子元素 (Father > Children)
		兼容性：IE8+、FireFox、Safari、Opera

	2.2 相邻兄弟选择器
		概念：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有同一个父元素
		语法格式：元素+兄弟相邻元素(Eelement+Sibiling)
		兼容性：IE8+、FireFox、Safari、Opera

	2.3 通用兄弟选择器
		概念：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
		语法格式：元素~后面所有的兄弟相邻元素(Eelement~Sibiling)

	2.4 群组选择器
		概念：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用“，”隔开
		语法格式：元素1，元素2，元素n（Eelement1，Eelement2，...,Eelement）
		兼容性：IE6+、FireFox、Safari、Opera

二、属性选择器
	对带有指定属性的HTML元素设置样式
	使用CSS3属性选择器，可以指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值
	
	1、Element[attribute]
		概念：为带有attribute属性的Element元素设置样式
		兼容性：IE8+、FireFox、Safari、Opera

	2、Element[attribute="value"]
		概念：为attribute="value"属性的Element元素设置样式
		兼容性：IE8+、FireFox、Safari、Opera

	3、Element[attribute~="value"]
		概念：选择attribute属性包含单词"value"的元素，并设置其样式
		兼容性：IE8+、FireFox、Safari、Opera

	4、Element[attribute^="value"]
		概念：设置attribute属性值"value"开头的所有Element元素的样式
		兼容性：IE8+、FireFox、Safari、Opera

	5、Element[attribute$="value"]
		概念：设置attribute属性值"value"结尾的所有Element元素的样式
		兼容性：IE8+、FireFox、Safari、Opera

	6、Element[attribute*="value"]
		概念：设置attribute属性值包含"value"的所有Element元素的样式
		兼容性：IE8+、FireFox、Safari、Opera

	5、Element[attribute|="value"]
		概念：设置attribute属性值为"value"或以"value-"开头的元素，并设置其样式
		兼容性：IE8+、FireFox、Safari、Opera

三、伪类选择器
	动态伪类 （锚点伪类、用户行为伪类）
	UI元素状态伪类
	CSS3结构类
	否定选择器
	伪元素

	1、动态伪类
		这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来
		1.1 锚点伪类
			:link,  :visited
		1.2 用户行为伪类
			:hover,  :avtive  :focus

	2、UI元素状态伪类
		把":enabled",":disabled",":checked"伪类称为UI元素状态伪类
		兼容性：IE9+、FireFox、Chrome、Safari、Opera（:checked）

	3、CSS3结构类
		CSS3的:nth选择器
		把CSS3的:nth选择器也称为CSS3的结构类
		选择方法：
		:first-child、:last-child、:nth-child()、:nth-last-child()、:nth-of-type()、
		:nth-last-of-type()、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty

		3.1 Element:first-child
		概念：选择属于其父元素的首个子元素的每个Element元素,并为其设置样式
		兼容性：IE8+、FireFox、Chrome、Safari、Opera
		
		3.2 Element:last-child
		概念：指定属于其父元素的最后一个子元素的Element元素的样式
		兼容性：IE8+、FireFox、Chrome、Safari、Opera

		3.3 Element:nth-child(N)
		概念：:nth-child(N)选择器匹配属于其父元素的第N个子元素，不论元素的类型
		兼容性：IE9+、FireFox4+、Chrome、Safari、Opera

		3.4 关于参数N
			3.4.1 Element:nth-child(number)
			选择某元素下的第number个Element元素
			3.4.2 Element:nth-child(n)
			n是一个简单表达式，取值从"0"开始计算。这里只能是"n"，不能用其他字母代替
			3.4.3 Element:nth-child(odd)、Element:nth-child(even)
			odd和even是可用于匹配下标是奇数或偶数的Element元素的关键词(第一个的下标是1)

		3.5 Element:nth-last-child(N)
		概念：匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
		兼容性：IE9+、FireFox4+、Chrome、Safari、Opera

		3.6 Element:nth-of-type(N)
		概念：:nth-of-type(N)选择器匹配属于父元素的特定类型的第N个子元素的每个元素
		兼容性：IE9+、FireFox4+、Chrome、Safari、Opera

		3.7 Element:nth-last-of-type(N)
		概念：:匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数
		兼容性：IE9+、FireFox4+、Chrome、Safari、Opera

		3.8 Element:nth-last-of-type
		概念：:first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素
		兼容性：IE9+、FireFox、Chrome、Safari、Opera

		3.9 Element:first-of-type
		概念：:first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素
		兼容性：IE9+、FireFox、Chrome、Safari、Opera

		3.9 Element:last-of-type
		概念：:first-of-type选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
		兼容性：IE9+、FireFox、Chrome、Safari、Opera

		3.10 Element:only-child
		概念：:only-child选择器匹配属于其父元素的唯一子元素的每个元素
		兼容性：IE9+、FireFox、Chrome、Safari、Opera

		3.11 Element:only-of-type
		概念：:only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
		兼容性：IE9+、FireFox4+、Chrome、Safari、Opera

		3.12 Element:empty
		概念：:empty选择器匹配没有子元素(包括文本节点)的每个元素
		兼容性：IE9+、FireFox、Chrome、Safari、Opera

	4、否定选择器（:not）
	概念：:not(Element/selector)选择器匹配非指定元素/选择器的每个元素
	语法格式：not(子元素/子选择器)  (Father:not(Children/selector))
	兼容性：IE9+、FireFox、Chrome、Safari、Opera

	5、CSS权重
	* 当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者优先级的过程
	* 权重等级与权值
		行内样式（1000）>ID选择器（100）>类、属性选择器和伪类选择器（10）>元素和伪元素（1）>*(0)
	* 权重计算口诀
		从0开始，一个行内样式+1000，一个id+100,一个属性选择器、class或者伪类+10,一个元素名或者伪元素+1
	* CSS权重规则
		包含更高权重选择器的一条规则拥有更高的权重
		ID选择器（#idValue）的权重比属性选择器（[id="idValue"]）高
		带有上下文关系的选择器比单纯的元素选择器权重要高
		与元素“挨得近”的规则生效
		最后定义的这条规则会覆盖上面与之冲突的规则
		无论多少个元素组成的选择器，都没有一个clsss选择器权重高
		通配符选择器权重是0，被继承的CSS属性也带有权重，权重也是0

	6、伪元素
		CSS伪元素用于向某些选择器设置特殊效果
		语法格式：元素::（Element::pseudo-element）
		兼容性：IE9+、FireFox、Chrome、Safari、Opera

		6.1 Element::first-line
		概念:根据"first-line"伪元素的样式对Element元素的第一行文本进行格式化
		说明:"first-line"伪元素只能用于块级元素

		6.2 Element::first-letter
		概念:用于向文本的首字母设置特殊样式
		说明:"first-letter"伪元素只能用于块级元素
		
		6.3 Element::before
		概念:在元素的内容前面插入新内容
		说明:常用"content"配合使用

		6.4 Element::after
		概念:在元素的内容后面插入新内容
		说明:常用"content"配合使用，多用于清除浮动

		6.5 Element::selection
		概念:用于设置在浏览器中选中文本后的背景色和前景色
		兼容性说明：::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀"-moz"

	

DAY 02
CSS3边框与圆角
	1、圆角理论（边框与圆角）
		1.1 CSS3圆角
		border-radius属性
		一个最多可指定border-*-radius属性的复合属性，这个属性允许为元素添加圆角边框
		语法：border-radius:1-4 length|%/1-4 length|%;
		兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera

		CSS3指定每个圆角
		多值：
		四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角（顺时针从左上开始）
		三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
		两个值：第一个值为左上角和右下角，第二个值为右上角和左下角

		属性：
		border-top-left-radius             定义了左上角的弧度
		border-top-right-radius            定义了右上角的弧度
		border-bottom-right-radius         定义了右下角的弧度
		border-bottom-right-radius         定义了左下角的弧度

		1.2 CSS3盒阴影
		box-shadow属性
		box-shadow属性可以设置一个或多个下拉阴影的框
		语法：
		box-shadow: h-shadow v-shadw blur spread color inset;
		兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera

		1.3 CSS3边界图片
		border-image属性
		使用 border-image-*属性来构建美丽的可扩展按钮
		语法：
		border-image:source slice width outset repeat;
		兼容性：IE不兼容、FireFox、Chrome、Safari6+、Opera不兼容
		边界图片详解
			1.3.1 border-image-source属性
			border-image:source属性指定要使用的图像，而不是由 border-style 属性设置的边框样式
			border-image-source:none|image;
			1.3.2 border-image-slice属性
			指定图像的边界向内偏移
			border-image-slice:number|%|fill;
			1.3.3 border-image-width属性
			指定图像边界的宽度
			border-image-width:number|%|auto;
			1.3.4 border-image-outset属性
			指定边框外部绘制 border-image-area的量
			border-image-outset:length|number
			1.3.5 border-image-repeat属性
			该属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）
			语法：border-image-pepeat:stretch|repeat|round|initial|inherit

DAY 03
CSS3背景与渐变
1、CSS3背景
	1.1 CSS3背景图像区域
		background-clip属性
		background-clip属性指定背景绘制区域
		语法：
		background-clip: border-box|padding-box|content-box;
			 border-box:背景被裁剪到边框盒
			 padding-box:背景被裁剪到内边距框
			 content-box:背景被裁剪到内容框
		兼容性：IE9+、FireFox、Chrome、Safari、Opera

	1.2 CSS3背景图像定位
		background-origin属性
		background-origin属性指定background-position属性应该是相对位置
			background-origin设置元素背景图片的原始起始位置
			background-position定义背景图片位置，两个值：水平和垂直偏移量
		语法：background-origin: padding-box|border-box|content-box	
		兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera

	1.3 CSS3背景图像的大小
		background-size属性
		background-size属性指定背景图片大小
		语法：background-size: length|percentage|cover|contain;
		兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera

	1.4 CSS3多重背景图像
		CSS3允许您为元素使用多个背景图像
		语法:background-image:url(img1.jpg),url(img2.png)

	1.5 CSS3背景整合
		背景缩写属性可以在一个声明中设置所有背景属性
		语法:background:color position size repeat clip attachment image;

2、CSS3渐变
	渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡
	
	2.1 线性渐变（Linear Gradients）属性
	是沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变（从一边拉向另一边）
	语法：background:linear-gradient(direction:,color-stop1,color-stop2,...);
	
	2.1.1 线性渐变-从上到下（默认）
	background:linear-gradient(color-stop1,color-stop2,...);
	
	2.1.2 线性渐变-从左到右
	background: -webkit-linear-gradient( begin-direction,color-stop1,color-stop2,...);
	background:    -moz-linear-gradient(   end-direction,color-stop1,color-stop2,...);
	background:      -o-linear-gradient(   end-direction,color-stop1,color-stop2,...);
	background:         linear-gradient(to end-direction,color-stop1,color-stop2,...);
	
	2.1.3 线性渐变-对角
	background: -webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,...);
	background:    -moz-linear-gradient(    end-level end-vertical,color-stop1,color-stop2,...);
	background:      -o-linear-gradient(    end-level end-vertical,color-stop1,color-stop2,...);
	background:         linear-gradient( to end-level end-vertical,color-stop1,color-stop2,...);
	
	2.1.4 线性渐变-使用角度
	语法：background:linear-gradient(angle,color-stop1,color-stop2,...);
	角度说明：
	角度是指水平线和渐变线之间的角度，逆时针方向计算。
	0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。

	2.1.5 线性渐变-颜色结点
	语法：background:linear-gradient(color1 length|percentage,corlor2 length|percentage,...);

	2.1.6 线性渐变-重复渐变
	语法：background:repeating-liner-gradient(color1 length|percentage,color2 lenghth|percentage,...);

	2.2 CSS3径向渐变
	径向渐变（Radial Gradients）属性
	从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）
	语法：
	background:radial-gradient(center,shape size,start-color,...,last-color);

	2.2.1 径向渐变-颜色结点均匀分布（默认）
	background:radial-gradient(color-stop1,color-stop2,...);
	2.2.2 径向渐变-颜色结点不均匀分布
	background:radial-gradient(color1 length|percentage,color2 length|percentage,...);
	2.2.3 径向渐变-设置形状
	background:radial-gradient(shape,color-stop1,color-stop2,...);
	形状说明
	circle-圆形
	ellipse-椭圆（默认）
	如果元素设置高宽值一样，参数无论设置两个当中哪个，显示效果都为圆形
	2.2.4 径向渐变-尺寸大小关键字
	background:radial-gradient(size,color-stop1,color-stop2,...);
	关键字说明
	closest-side:最近边       farthest-side:最远边
	close-corner:最近角       farthest-corner:最远角
	2.2.5 径向渐变-重复渐变
	语法：
	background:repeating-radial-gradient(color1 length|percentage,color2 length|percentage...);

	2.3 其他渐变
	2.3.1 Internet Explorer渐变
	语法：filter: progid: DXlmageTransform.Microsoft.gradient(startColorstr='startColor',endColorstr='endColor',GradientType=0);

DAY04 CSS3转换
1、transform
	CSS3的变形（Transform）属性
	让元素在一个坐标系统中变形，这个属性包含一系列变形函数，可以移动、旋转和缩放元素
	语法：
	transform:none|<transform-function>[<transform-function>]*;
	默认值
	transform:none;
	兼容性：IE12+、FireFox16+、Chrome36+、Safari16+、Oprea23+

2、2D转换
	CSS3 rotate()            旋转
	CSS3 translate()         平移
	CSS3 scale()             缩放
	CSS3 skew()              扭曲或斜切
	CSS3 matrix()            矩阵或混合

	2.1 旋转rotate
	通过指定的角度参数对原元素指定一个2D rotation(2D旋转)。
	语法：transform:rotate(<angle>)
	参数说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转

	2.2 移动translate
	translate()方法，根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素移动
	三种情况
	translateX(x)仅水平方向移动（X轴移动）
	translateX(y)仅垂直方向移动（y轴移动）
	translate(x,y)水平方向和垂直方向同时移动（也就是x轴和y轴同时移动）
	2.2.1 translateX(<translation-value>)
	通过指定一个X方向上的数目指定一个translation
	语法：transform:translateX(<translation-value>);
	2.2.2 translateY(<translation-value>)
	通过指定一个Y方向上的数目指定一个translation
	语法：transform:translateY(<translation-value>);
	2.2.3 translate(<translation-value>[,<translation-value>])
	通过矢量[tx,ty]指定一个2D translation,tx是第一个过渡值参数，ty是第二个过渡值参数选项
	语法：transform:translate(<translation-value>[,<translation-value>]);

	2.3 缩放scale
	scale()方法，指定对象的2D scale(2D缩放)
	scaleX(x)仅水平方向缩放（X轴缩放）
	scaleY(y)仅垂直方向缩放（y轴缩放）
	scale(x,y)水平方向和垂直方向同时缩放（也就是x轴和y轴同时缩放）
	2.3.1 scaleX(<number>)
	使用[sx,1]缩放矢量执行缩放操作，sx为所需参数
	语法：
	transfrm:scaleX(<number>);
	2.3.2 scaleX(<number>)
	使用[1,sy]缩放矢量执行缩放操作，sx为所需参数
	语法：
	transfrm:scaleY(<number>);
	2.3.3 scale(<number>[,<number>])
	提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)
	语法：
	transfrm:scale(<number>[,<number>]);

	2.4 扭曲skew
	skew()方法，指定对象skew transformation(斜切扭曲)
	skewX(x)仅水平方向扭曲变形（X轴扭曲变形）
	skewY(y)仅垂直方向扭曲变形（y轴扭曲变形）
	skew(x,y)水平方向和垂直方向同时扭曲变形（也就是x轴和y轴同时按一定角度值扭曲变形）
	
	2.4.1 skewX(<angle>)
	按给定的角度沿X轴指定一个skew transformation(斜切变换)。
	语法：
	transform:skewX(<angle>);
	2.4.2 skewY(<angle>)
	按给定的角度沿Y轴指定一个skew transformation(斜切变换)。
	语法：
	transform:skewY(<angle>);
	2.4.3 skew(<angle>[,<angle>])
	X轴到Y轴上的skew transformation(斜切变换)。第一个参数对应X轴，第二个参数对应Y轴
	语法：
	transform:skew(<angle>[,<angle>]);

	2.5 矩阵matrix
	以一个含六值（a,b,c,d,e,f）变换矩阵的形式指定一个2D变换
	相当于直接应用一个[a,b,c,d,e,f]变换矩阵
	语法：transform:matrix(a,c,b,d,tx,ty);
	参数说明：tx,ty就是基于X和Y坐标重新定位元素。

3、3D转换
	3.1 rotate3d
	
	3.1.1 旋转rotateX
	rotateX方法指定对象在X轴上的旋转角度。
	语法：
	transform:rotateX(angle);
	参数说明：angle表示旋转角度

	3.1.2 旋转rotateY
	rotateY方法指定对象在y轴上的旋转角度
	语法：transform:rotateY(angle);
	参数说明：angle表示旋转角度

	3.1.3 旋转rotateZ
	rotateY方法指定对象在Z轴上的旋转角度
	语法：transform:rotateZ(angle);
	参数说明：angle表示旋转角度
	
	3.1.4 旋转rotate3d
	rotate3d方法指定对象的3D旋转角度
	语法：
	transform:rotate3d(x,y,z,angle)
	参数说明：
	前三个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度，参数不允许省略

	3.2.1 移动translateZ
	translateZ方法指定对象Z轴平移
	语法：
	transform:translateZ(z);
	参数说明：
	参数对应Z轴，不允许省略

	3.2.2 移动translate3d
	translate3d方法指定对象的3D位移
	语法：transform:translate3d(x,y,z);
	参数说明：
	第一个参数对应X轴，第二个参数对应Y轴，第三个参数对应Z轴，参数不允许省略

	3.3.1 缩放scaleZ
	scaleZ方法指定对象的z轴缩放。
	语法：
	transform:scaleZ(z);
	参数说明：
	参数对应Z轴，不允许省略。

	3.3.2 缩放scale3d
	scale3d方法指定对象的3D缩放
	语法：
	transform:scale3d(x,y,z);
	参数说明：
	第一个参数对应X轴，第二个参数对应Y轴，第三个参数对应Z轴，参数不允许省略

	3.4 矩阵matrix3d
	matrix3d方法以一个4X4矩阵的形式指定一个3D变换。
	语法：
	transform:matrix3d(sn,n,n,n,n,sy,,n,n,n,n,sz,n,n,n,1);
	参数说明：使用16个值的4x4矩阵。

4、transform与坐标系统
	transform-origin属性
	transform-origin属性允许您更改转换元素的位置。
	语法：
	transform-origin: x-axis y-axis z-axis;

5、矩阵
	5.1 矩阵的概念：
	矩阵可以理解为方阵，只不过，平时方阵里面站的是人，矩阵中是数值。而所谓矩阵的计算，就是两个方阵的人（可以想象成古代士兵）相互冲杀。
	
	5.2 CSS3中的矩阵
	CSS3中的矩阵指的是一个方法，书写为matrix()和matrix3d();
	matrix是元素2D平面的移动变换（transform）,2D变换矩阵为3*3;
	matrix3d是3D的移动变换（transform）,3D变换是4*4的矩阵。

	5.2.1 矩阵（matric）
	transform:matric(a,b,c,d,tx,ty);
	注意书写方向是竖直方向
	转换公式
	x,y表示转换元素的所有坐标
	目标矩阵说明
	ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。
	例子：
	transform:matrix(1,0,0,1,30,30);/* a=1,b=0,c=0,e=30,f=30 */
	根据这个矩阵偏移元素的中心点，假设是（0,0），即x=0,y=0
	变换后，x=ax+cy+e=1*0+0*0+30=30,y=bx+dy+f=0*0+0*1+30=30
	于是，整个元素的中心点从（0,0）变成了（30,30），整个元素发生了平移。
	说明：
	transform:matrix(1,0,0,1,x,y)等同于transform:translate(x,y);
	注意：matrix在火狐浏览器下需要添加单位，webkit默认为px,translate等方法需要加单位

	5.2.2 
	矩阵matrix缩放(scale)
	matrix(sx,0,0,sy,0,0)—————scale(sx,sy)
	
	矩阵matrix旋转(rotate)
	matrix(cosθ,sinθ,-sinθ,cosθ,0,0)—————rotate(θdeg)

	矩阵matrix拉伸(skew)
	matrix(1,tanθy,tanθx,1,0,0)————skew(θxdeg,θydeg)

	矩阵matrix镜像对称效果
	matrix((1-k*k)/(1+k*k),2k/(1+k*K),2k/(1+k*K),(k*k-1)/(1+k*k),0,0)
	说明：对称轴一定通过元素交换的中心点，k是对称轴的斜率

	5.3 3D矩阵
	3D变换中的矩阵
	从二维到三维，是从4到9；而在矩阵里头是从3*3变成4*4，9到16了。
	例子：
	transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);

6、扩展属性
	6.1 transform-style属性
	transform-style属性指定嵌套元素是怎样在三维空间呈现。
	语法：																															
	transform-style: flat|preserve-3d;
	默认值：
	transform-style: flat;

	6.2 perspective属性
	指定观察者与[z=0]平面的距离，使具有三维位置变换的元素产生透视效果。
	语法：
	perspective:number|none;
	默认值：
	perspective:none;
	perspective-origin属性
	指定透视点的位置
	语法：
	perspective-origin:x-axis y-axis;
	默认值：
	perspective-origin:50% 50%;

	6.3 backface-visibility属性
	指定元素背面向用户时是否可见
	语法：
	backface-visibility:visible|hidden;
	默认：
	backface-visibility:visible;


DAY05 CSS3过渡
1、概念
	1.1 过渡（Transition）
		允许css的属性值在一定得时间区间内平滑地过渡
		在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画的效果改变CSS的属性值。
		兼容性：
		IE10+、FireFox16+、Chrome26+、Safari6.1、Opera12.1+

2、transition属性详解
	2.1 transition-property属性
		检索或设置对象中的参与过渡的属性
		语法：
		transition-property:none|all|property;
		参数说明：
		none(没有属性改变)
		all(所有属性改变)，默认值
		property(元素属性名)

	2.2 transition-duration属性
		检索或设置对象过渡的持续时间。
		语法：
		transition-duration:time;
		参数说明：
		规定完成过渡效果需要花费的时间（以秒或者毫秒计）
		默认值为0

	2.3 transition-timing-function属性
		检索或设置对象中过渡的动画类型
		语法：
		transition-timing-function:easy|linear|ease-in|ease-out|ease-in-out|
		step-start|step-end|steps(<integer>[,[start|end]]?)|
		cubic-bezier(<number>,<number>,<number>,<number>);
		只能使用一个属性
		参数说明：
		linear:线性过渡。等同于贝塞尔曲线（0.0,0.0,1.0,1.0）
		ease:平滑过渡。等同于贝塞尔曲线（0.25,1.0,0.25,1.0）
		ease-in:由慢到快。等同于贝塞尔曲线（0.42,0,1.0,1.0）
		ease-out:由快到慢。等同于贝塞尔曲线（0,0,0.58,1.0）
		ease-in-out:由慢到快再到慢。等同于贝塞尔曲线（0.42,0,0.58,1.0）
		step-start:等同于steps(1,start)
		step-end:等同于steps(1,end)
		steps(<integer>[,[start|end]]?):接受两个参数的步进函数 
										第一个参数：必须为正整数，指定函数
										第二个参数：取值可是start或end,指定每一步的值发生变化的时间点
										第二个参数：可选，默认值为end
	2.4 transition-delay属性
		检索或设置对象延迟过渡的时间
		语法：
		transition-delay:time;
		参数说明：
		指定秒或毫秒数之前要等待切换效果开始
		默认值为0

3、transition简写
	transition属性
	复合属性，检索或设置对象变换时的过渡。
	语法：
	transition:property duration timing-function delay;

DAY06 CSS3动画
1、动画（animation）
	anima-灵魂、animate-赋予生命
	动画可以定义为使用绘画的手法，创造生命运动的艺术。
   视觉暂留原理
   人类具有"视觉暂留"的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。
   动画原理：
   通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，
   在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果。
   兼容性：
   IE10+、FireFox16+、Chrome43+、Safari9+、Opera30+、Android(-webkit-)
   手机设备的浏览器在使用CSS3动画时，要加上webkit前缀
   CSS3动画
   使元素从一种样式逐渐变化为另一种样式的效果。

2、animation属性详解
	2.1 animation-name属性
		检索或设置对象所应用的动画名称。
		语法：
		animation-name:keyframename|none;
		参数说明：
		keyframename:指定要绑定到选择器的关键帧的名称；
		none:指定有没有动画（可用于覆盖从级联的动画）。

	2.2 animation-duration属性
		检索或设置对象动画的持续时间。
		语法：
		animation-duration:time;
		参数说明:
		time指定动画播放完成花费的时间。默认值为0，意味着没有动画效果。

	2.3 animation-timing-function属性
		检索或设置对象动画的过渡类型
		语法：
		animation-timing-function:
		ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|
		step(<nteger>[,[start|end]]?)|cubic-bezier(<number>,<number>,
		<number>,<number>,);
		参数说明：
		linear:线性过渡。等同于贝塞尔曲线（0.0,0.0,1.0,1.0）
		ease:平滑过渡。等同于贝塞尔曲线（0.25,1.0,0.25,1.0）
		ease-in:由慢到快。等同于贝塞尔曲线（0.42,0,1.0,1.0）
		ease-out:由快到慢。等同于贝塞尔曲线（0,0,0.58,1.0）
		ease-in-out:由慢到快再到慢。等同于贝塞尔曲线（0.42,0,0.58,1.0）
		step-start:等同于steps(1,start)
		step-end:等同于steps(1,end)
		steps(<integer>[,[start|end]]?):接受两个参数的步进函数 
										第一个参数：必须为正整数，指定函数
										第二个参数：取值可是start或end,指定每一步的值发生变化的时间点
										第二个参数：可选，默认值为end
		cubic-bezier(<number>,<number>,<number>,<number>):特定的贝塞尔曲线类型，4个数值需在[0,1]区间内;

	2.4 animation-delay属性
		检索或设置对象动画的延迟时间。
		语法：
		animation-delay:time;
		参数说明：
		可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0.

	2.5 animation-iteration-count属性
		检索或设置对象动画的循环次数。
		语法：
		animation-iteration-count:infinite|<number>;
		参数说明：
		<number>为数字，其默认值为“1”；infinite为无限次数循环。

	2.6 animation-direction属性
		检索或设置对象动画在循环中是否反向运动。
		语法：
		animation-direction:normal|reverse|alternate|alternate-reverse|initial|inherit;
		参数说明：
		normal:正常方向
		reverse:反方向运行
		alternate:动画先正常运行再反方向运行，并持续交替运行
		alternate-reverse:动画先反运行再正方向运行，并持续交替运行

	2.7 animation-fill-mode属性
		规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式。
		语法：
		animation-fill-mode:none|forwards|backwards|both|initial|inhert;
		参数说明：
		none:默认值。不设置对象动画之外的状态。
		forwards:设置对象状态为动画结束时的状态。
		backwards:设置对象状态为动画开始时的状态。
		both:设置对象状态动画结束或开始的状态。

	2.8 animation-play-state属性
		指定动画是否正在运行或已暂停。
		语法:
		animation-play-state:paused|running;
		参数说明：
		paused:指定暂停动画；
		running:默认值，指定正在运行的动画。

	2.9 animation属性
		复合属性。检索或设置对象所应用的动画特效。
		语法：
		animation:name duration timing-function delay iteration-count
		direction fill-mode play-state;

3、关键帧
	3.1 Keyframes定义
		关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。
		使用说明：
		使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。
		在动画过程中可以通过@keyframes规则多次更改CSS样式的设定。
		语法：
		@keyframes animationname{
			keyframes-selector{
				css-style;
			}
		}
		参数说明：
		animationname:必写项，定义animation的名称。
		keyframes-selector:必写项，动画持续时间的百分比，0-100%、from(0%)、to(100%).
		css-style:必写项，一个或多个合法的CSS样式属性。

4、动画性能优化
	4.1 will-change原理
		- position-fixe替代background-attachment
		- 带图片的元素放在伪元素中
		- 巧用will-change

		- 目标：
		增强页面渲染性能。
		- CPU和GPU：
		CPU即中央处理器，解释计算机指令以及处理计算机软件中的数据。
		GPU即图形处理器，专门处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算
		而设计的，有了它，CPU就从图形处理的任务中解放出来，可以执行其他更多的系统任务。
		- 硬件加速
		在计算机中把计算量非常大的工作分配给专门的硬件来处理，减轻CPU的工作量。

		- 现状
		CSS的动画、变形、渐变并不会自动触发GPU加速，而是使用浏览器稍慢的软件渲染引擎。
		在transition,transform和animation的世界里，应该卸载进程到GPU以加快速度。
		只有3D变形会有自己的layer,2D变形不会。
		- 解决方法
		translateZ()(or translate3D()) Hack
		为元素添加没有变化的3D变形，骗取浏览器触发硬件加速。
		- 代价
		这种情况通过向它自己的层叠加元素，占用RAM和GPU存储空间。

	4.2 will-change
		提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。
		语法：
		will-change:auto|scroll-position|contents|<custom-ident>|<animateable-feature>;
		兼容性：
		IE13+、FireFox47+、Chrome49+、Opera39+、IOS9.3+、Android52+
		关键词说明：
		auto:此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
		scroll-position:表示将要改变元素的滚动位置。
		contents:表示将要改变元素的内容。
		<custom-ident>:明确指定将要改变的属性与给定的名称。
		<animateable-feature>:可动画的一些特征，比如left、top、margin等。
		使用注意：(勿滥用、提前申明、remove)

DAY07 CSS3图片切换特效
1、做切换效果之前的准备