1.css动画animation
动画序列，里边有每一帧
1)声明动画序列：@keyframes
@keyframes test{
form{} 0%{}
20%{}
to{} 100%{}
}
2)使用动画
animation-name:test;
animation-duration:10s;动画时长
animation:myani 5s ease 1s;
animation-duration:执行时间
animation-direction:方向
1)normal 正常的
2)reverse 反转 从最后一帧到第一帧
3)alternate 在执行多次动画的时候，奇数次从第一帧到最后一帧，偶数次从最后一帧到第一帧
4)alternate-reverse 在执行多次动画的时候，奇数次从最后一帧到第一帧，偶数次从第一帧到最后一帧
animation-delay:延迟时间
animation-play-state:运行状态
1)running
2)paused
animation-iteration-count:执行次数
1)infinite 无限次
animation-fill-mode:填充模式
1)forwards 在动画结束的时候，使用动画的结束帧去填充
2)backwards 在有动画延迟的时候，在延迟时间内使用动画的开始帧来填充
animation-timing-function:时间函数 速度函数
1)ease 先快后慢
2)ease-in 先慢后快
3)ease-out 先快后慢
4)ease-in-out 先慢后快再慢
5)linear 线性的
2.变形(transform)
1)旋转：rotate(30deg) z轴
rotateX(30deg) x轴
rotateY(30deg) y轴
2)放大和缩小
scale(2)
3)倾斜
skew(30deg,30deg)
skewX
skewY
4)平移
translate(10px,10px)
translateX
translateY
5)过渡
transition:属性 时间 时间函数 延迟时间;
3.媒体查询:响应式布局，在不同的屏幕分辨率下显示不同的布局或者样式
768px 992px 1200px
小于768px的是超小屏
大于768，小于992，是小屏
大于992px，小于1200px，是中屏
大于1200px，是大屏
@media screen and (max-992px){
//css代码块
div{
100px;
}
}
4. 扩展:
1)图片精灵技术
图标或者logo比较多的情况下，需要多次向服务器发送请求，去获取图片。
所有的图标或者logo放到一张图片上。（然后去截取拿取）
2) overflow
用法一：超过部分如何处理
<div class="content">
xxx
</div>
overflow:auto/scroll/hidden;
用法二：消除子元素浮动无法支撑父元素的问题
ul {
overflow:hidden;
}
ul > li {
float:left;
}
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>