一、今日学习内容
1.CSS3新增选择器：伪元素选择器
概念：利用css创建新标签元素，不需要新增html标签，简化html的结构
基本语法：
div：：before {content：“ ”； } ；
div：：after {content：“ ”； } ；
注意：1.before和after创建的元素是行内元素；
2.必须有content属性；
3.before是在父元素内容的前面创建元素，after是在父元素内容后面创建元素；
2.CSS3过渡
概念：可在不使用flash或者js的前提下可以实现从一种样式转化为胡另一种样式的效果（IE9以下版本不支持）
语法：transition：要过渡的属性 花费时间 运动轨迹 何时开始；
3.CSS3的2D转换
3.1 2D位移
基本语法：
1.transform：translate（x，y）；对盒子的X轴和Y轴进行位移
2.transform：translateX（n）；对盒子的X轴进行位移；
3.transform：translateY（n）；对盒子的Y轴进行位移；
3.2 2D旋转
基本语法：transform：rotate(度数deg)；
3.3 2D缩放
基本语法： transform:scale(x,y);其中x，y代表缩放的倍数
3.4设置中心点
基本语法：transform-origin:x,y;
4.CSS动画制作
4.1动画序列
1.0%是动画的开始，100%是动画的结束，这样的规则叫做动画序列
2.在 @keyframes 中来规定css的样式，keyframes叫做关键帧
3.可以用百分比来规定变化发生的时间，或者用关键字from 和 to来规定，等同于0%~100%
4.动画常用属性值
1.@keyframes 定义动画
2.animation 所有动画简写属性，不包括animation-play-state属性
3.animation-name 调用@keyframe定义动画名字
4.animation-durtion 完成一个周期动画所需时间，默认0
5.animation-timing-function 规定动画速度曲线
6.animation-delay 何时开始
7.animation-interation-count 规定动画循环次数，默认1，无限循环为infinite
8.animation-direction 规定下一周期是否进行逆向播放，默认为normal，逆向为alternate
9.animation-play-state 规定动画正在运行或者暂停，默认running ，暂停为paused
10.animation-fill-mode 规定动画结束时状态，保持结束后状态forwords ，回到起点为backwords
animation-timing-function中step（）属性是指分几步完成
二、今日问题
未遇到问题
|
