css扩展(响应式布局和动画)

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>