(一)颜色模式（属性值：可以控制某个属性）
1.rgba(red0-255,green0-255,blue0-255,alpha不透明度0-1)
2.hsla(色调0-360,饱和度0-100%,亮度0-100%,alpha0-1)
3.transparent 完全透明 (三角形)
(二)盒模型
盒模型由content内容、padding内填充、border边框、margin外间距组成。
1.标准盒模型：width、height指的是content的宽高
2.怪异盒模型: width、height指的是content+padding+border的宽高
box-sizing 规定盒模型
*属性值：content-box（默认） border-box设置成怪异盒模型
三、3d变换
1.transform:translate3d(x,y,z); 移动变换
transform:translateZ(z),其他方向同理
2.transform-style:preserve-3d; 保持3d变换（父元素上）
*flat平面（默认）
3.设置观察的距离，景深perspective(父元素上)
4.旋转变换
左手定律：大拇指指向轴的正方向，其他手指卷曲的方向为旋转的正方向
transform:rotate3d(x,y,z,deg) x、y、z取值为0（不旋转）或1（旋转）
transform:rotateX(deg);
立方体
1.先把所有的面都定位在盒子的同一位置
2.设置3d变换，将每个面移动到指定位置
3.设置景深
4.transform-origin 变换的基准点
5.perspective-origin 观察的基准点
3D导航
1.导航的套路
2.两个a一开始先放在li同一位置再进行移动旋转变换
3.hover之后整个li翻转即可。过渡及延迟。
四、关键帧动画
（一）自定义动画
（1）通过@keyframes指定动画序列；@keyframes name{}
（2）通过百分比将动画序列分割成多个节点；
（3）在各节点中分别定义各属性
（4）通过animation将动画应用于相应元素；
@keyframes name{
百分比{
声明
}
}
(二) animation属性
1. animation-name 动画名字
2. animation-duration 动画播放时间
3. animation-timing-function 动画播放的形式
linear匀速 ease…
steps(n)
steps(n)、steps(n,end)每一帧都分成n步，每一步都以前一步的状态填充时间段
steps(n,start)每一帧都分成n步，每一步都以后一步的状态填充时间段
4. animation-delay 动画播放的延迟
5. animation-iteration-count 动画播放的次数 infinite无限次播放
6. animation-direction 动画播放的方向
属性值：normal正向播放 reverse反向播放 alternate 交替播放
alternate-reverse反向交替播放
animation-play-state: paused; 动画暂停
7. animation-fill-mode 动画完成后的状态 forwards保持最后的状态
animation: 1 2 3 4 5 6 7;