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、做切换效果之前的准备
扫一扫
06-24
202
02-14
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
