一：伪元素：
定义：伪元素选择器可以利用css创建新标签元素，而不需要新增html标签，从而简化html结构
注意：
1.before和after创建的元素是行内元素
2.创建的元素我们在html的结构中里面找不到，所以叫做伪元素
3.before和after必须有content属性
4.before是在父元素内容的前面创建元素，after在父元素的内容后面插入元素
5.伪元素选择器和元素选择器的权重一样，都是1
二、CSS3过渡
概念：
过渡可以在不使用flash或者js的前提下可以实现从种样式转化为另一种样式效果（IE9一下版本不支持）
语法：
transition：要过渡的属性 花费的时间 运动曲线 何时开始；
1.要过渡的属性
想要变化的css属性，可以是宽度、高度、背景颜色、内外边距等等，如果想要变化所有的属性，那么直接写all就可以了
2.过渡时间
单位是秒，必须写单位：例如0.5s
3.运动曲线
默认是case(可以省略)
三、CSS的2D转换
属性：transform（2D的位移）
对盒子的x轴和y轴进行位移
transform：translate（x,y）;
对盒子的x轴和x轴进行位移
transform：translateX（n）;
对盒子的x轴和y轴进行位移
transform：translateY（n）;
特点：
1.translate不会影响其他元素的位置（和相对定位类似）
2.translate的值如果是百分比，就代表移动盒子本身宽高的50% translate（50%，50%）；
3.translate对行内元素没有效果
4.translate设置盒子的水平垂直居中
position：absoluate top:50%;left:50%; transform:translate(50%,50%);
scale（2D缩放）
语法：transform：scale（x,y） transform：scale（1，1）；里面的倍数代表x轴y轴缩放的倍数
scale缩放和width/height设置盒子rotate2D旋转)
使用该属性值可以对元素进行旋转设置，transform：rotate（度数）
正值代表顺时针旋转，负值逆时针旋转
transform-origin设置中心点
语法：
transform-origin：x,y;
1.使用方位名词设置中心点
2.利用像素值设置元素的中心点
注意：
当单位为具体像素值时，距离的起始点是元素的左上角
四、CSS3动画制作
动画序列
1.0%是动画的开始，100%是动画的结束
2.在@kevframes 中来规定css的样式，kevfremas叫做关键帧
3.可以用百分比来规定变化发生的时间，或者用关键字from和to来规定，等同于0%~100%
动画的使用步骤：
1.定义动画
2.调用动画
|
