H5C3

H5新增语义标签

新增表单，表单属性

---

CSS3属性选择器

结构伪类选择器

其中n可以是奇数（even）偶数（odd），也可以是公式、数字。
伪元素选择器

before和after必须有content属性
before和after创建一个元素，但是属于行内元素
因为在dom里面看不见按创建的元素，所以称为伪元素
伪元素和标签选择器一样，权重为1

---

2D转换transform

1. 移动：translate
   移动盒子的位置：定位、盒子的外边距、2D转换移动
   注意 translate不会影响其他元素的位置；对于行内元素是无效的；百分比单位是相对于自身元素的translate（50%，50%）。
2. 旋转：rotate
   注意正数为顺时针，负数是逆时针；单位deg.
3. 转换中心点transform-origin
4. 缩放scale
   注意：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
5. 综合写法 当我们同时有位移和其他属性的时候，应该将位移放到最前面；顺序会影响到转换的效果（先旋转会改变坐标轴方向）

动画

制作动画基本步骤

1. 先定义动画
   用keyframes定义动画,可以做多个状态keyframes关键帧，百分比是按照持续时间平均划分的。

 @keyframes 动画名称{
            0%{
				开始样式
            }
            100%{
				结束样式
            }
        }

2. 再使用（调用）动画

animation-name:动画名称
animation-duration:持续时间

常用的动画属性

animation-name:动画名称
animation-duration:持续时间
animation-timing-function:运动曲线
animation-delay:何时开始
animation-iteration-count:播放次数，默认为1,无限播放infinite
animation-direction:播放的方向，默认normal，alternate逆播放
animation-play-state:播放状态
animation-fill-mode:动画结束后的状态，保持forward回到起始backwards
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态