一、今日学习内容
伪元素选择器
after ：：after
before ：：before
伪元素选择器可以帮助我们利用css创建新标签元素，而不需要新增html标签，简化html结构。
注意：
bofore和after创建元素是行内元素。
创建的元素我们在文档结构树找不到，所以叫做伪元素
before和after必须要有content，
before在父元素内容前面创建元素，after在父元素内容后面。（before和after也是父类的内容）
伪元素和元素选择器一样，权重都是1
css3 过渡
transition：需要变化属性 延迟时间 ease 变化 变化完成时间
多组属性之间用，隔开
概念：过渡可以在不使用flash或者js的前提下可以实现从一种样式转换为另一种样式
但是ie9以下版本不支持
语法
transition：要过渡的属性 花费时间 运动的曲线 延迟时间
1、要过渡的属性：想要变化css的属性可以是宽度。高度、 背景颜色、内外边距等等，如果想要变化所有的属性，name直接写all就可以
2、花费的时间：单位是s，必须写单位 例如0.5s
3、运动的曲线，默认值是ease，可以省略
linear 匀速变化 ease 逐渐变慢
4、什么时候开始
可以省略，单位是秒，默认是0秒
css3的2d转换
transform：变形
对盒子的x和y轴进行位移 transform ：teanslate（x，y）
对盒子单独进行x或者y轴位移 transform：translateX() transform：translate（）
技巧：
如果transform里面的translate属性值是百分比 是相对于自身的宽高来位移的
移动的元素相当于绝对定位，会覆盖下面的标签流元素
可以利用百分比来进行盒子的居中对齐
对行内元素没有用
2d转换角度
transform：rotate（180deg）
transform的rotate属性 里面的单位是角度deg 正数是顺时针旋转 负数是逆时针旋转
设置旋转点：transform-origin：属性值有x轴和y轴
transform-origin x y
方位名词或者像素值
在属性标签里面设置（以左上角为起点）
2d的缩放
transform：scale（x，y） 分别代表x和y轴的缩放倍数
scale和width height 设置大小的区别
直接用宽高来设置的时候，上沿不动，只向下方变化，会对其他盒子产生影响。
用scale的话，，默认以盒子中心点来进行缩放，不会丢其他盒子产生影响
动画制作：
动画序列：0%是动画的开始 100%是动画的结束，这样规则叫做动画序列
在@keyframes 来规定css的样式，keyframes 也叫作关键帧
可以用百分比来规定变化发生的时间，或者用关键字form to 来规定，等同于0% 到100% 常用的是0和100
动画的使用步骤：
1、定义动画
2、调用动画
@kerframes 定义动画
animation 所有动画的简写属性 animation-paly-state 播放状态 一般不写
animation-name 调用@kerframes 的名字 必须值
animation-duration 对应完成一个周期动画所花费的时间 默认是0 必须值 可以是秒或者毫秒
animation-timing-function 默认是ease linear
特殊的运动曲线steps（）步长 分几步来完成，如果有该属性，，就不需要ease那些了
animation-delay 延迟时间
animation-interation-count 规定动 画破防的次数 无线循环设置成infinite
animation-direction 动画是否在下一个周期进行逆向播放，默认值是normal，逆向播放设置为alternate
animation-play-state 规定动画是否正在运行或者暂停 默认running paused暂停
animation-fill-mode 规定动画结束后的状态 保持结束后状态forwards 如果回到起始位置就是backwords
css3实现轮播图
|
