Web前端之CSS（7）—— 过渡、动画、BOOT

一.过渡

1.属性
1.transition-property

2.transition-duration

3.指定过渡时间曲线函数
transition-timing-function:
取值：
（1）ease 默认值，慢速开始，速度加快，慢速结束
（2）linear 匀速
（3）ease-in 慢–快
（4）ease-out 快–慢
（5）ease-in-out 慢速开始，慢速结束，中间先加速后减速

4.指定过渡元素的延迟时间
transition-delay
取值，以s/ms为单位的数字

5.过渡属性编写的位置
（1）将过渡放在元素声明的样式中，有去有回
（2）将过渡放在触发的操作中(hover),只管去，不管回

6.过渡的简写方式
transition：property duration timing-function delay;
一个过渡最简洁方式是transition:duration;

练习
起点：一个黄色div,200*200 福 10px
终点：先旋转2160deg,位移500px,红色背景，圆形div，福 font-size?

二.动画(重点********)
1.什么是动画
使元素从一种样式逐渐变为另一种样式
就是将多个过渡效果结合到一起

2.动画是通过"关键帧"，来控制动画的每一步
关键帧
（1）动画执行的时间点
（2）在该时间点上的样式

3.动画的使用步骤
（1）声明动画(定义很多关键帧)
@keyframes 动画名称{
0%{动画开始时的样式}
25%{动画执行到1/4时的样式}
50%{动画执行到1/2时的样式}
100%{动画结束的时候的样式}
}
（2）调用动画
2.1指定动画名称
animation-name:change;
2.2指定动画播放的一个周期
animation-duration:3s;
2.3指定动画播放的速度时间曲线函数
animation-timing-function
ease/linear/ease-in/ease-out/ease-in-out
2.4指定动画的延迟
animation-delay
2.5动画的播放次数
animation-iteration-count:infinite;
取值1.具体次数，数字
2.infinite无限次
2.6动画的执行方向
animation-direction:alternate;
取值 normal,默认值，正常播放 0-100
reverse 逆向播放 100-0
alternate 轮流播放 奇数次正向，偶数次逆向
2.7简写方式
animation:name duration timing-function delay iteration-count direction
最简洁方式animation:change 3s;
2.8 animation-fill-mode:
规定动画在播放前或者播放后的显示状态
none 默认值，不显示
forwards 动画播放完成后，保存最后一帧的状态
backwards 动画播放之前，在延时的过程中，动画显示第一帧
both 是同时设置forwards和backwards
2.9 animation-play-state:
设置动画是处于播放还是暂定的状态上
paused
running

练习：钟表
动画的兼容性
如果要低版本浏览器兼容，需要在动画声明之前加前缀
@keyframes 动画名称{关键帧}
@-webkit-keyframes 动画名称{关键帧}
@-ms-keyframes 动画名称{关键帧}
@-moz-keyframes 动画名称{关键帧}
@-o-keyframes 动画名称{关键帧}

三.CSS的优化
减少服务器压力
提升用户体验
1.css优化原则
尽量减少HTTP请求的个数
页面顶部引入css文件
将css和js写在独立的文件中

2.CSS代码优化
合并样式
缩小样式文件
减少样式重写
避免出现空的src和href
选择更优的样式属性值
代码压缩

四.Bootstrap

www.bootcss.com
1.响应式布局（重点）
Responsive web page 响应式布局/自适应网页
可以根据浏览器设备不同(pc,pad,phone)
而自动的更改布局，图片，文字效果，不会影响用户体验

2.响应式布局必须做到
（1）布局:不能使用固定宽度，必须是流式布局(浮动)
（2）文字和图片大小随着容器大小而改变
（3）媒体查询技术

3.如何测试响应式网页
（1）使用真实设备测试
好处：真实可靠
坏处：测试任务量巨大
（2）使用第三方模拟器
好处:无需添置太多真实设备，测试方便
坏处：测试效果有限，需要进一步验证
（3）.使用chrome等浏览器自带的模拟器
好处：简单方便
坏处: 测试效果有限，需要进一步验证

4.编写响应式布局—重点**********************************************
（1）在meta中声明viewport元标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

使用meta设置视口
viewport 视口
width=device-width,视口宽度设置为设备宽度
initial-scale=1.0 视口宽度是否能缩放 1/1.0 不缩放
maximum-scale=1.0 允许缩放的最大倍率
user-scalable=0 是否允许用户手动缩放 yes/no/1/0
一般设置

<meta name="viewport" content="width=device-width, initial-scale=1"> 

（2）所有内容/文字/图片使用相对尺寸，不要使用绝对值
（3）流式布局+弹性布局，搭配媒体查询技术
（4）使用css3 Media Query技术–响应式布局的必备条件
Media：
媒体，指的是浏览网页的设备
screen(pc/pad/phone)
tv（电视)
print（打印机）…

Media Query:媒体查询，可以根据当前浏览器设备不同，或者尺寸/方向/解析度等不同。有选择性的执行一部分CSS样式，忽略其他部分的css样式
根据媒体查询的结果执行同一个css文件中不同的代码块

@media screen and （min-width:768px） and (max-width:991px){
   选择器{样式}
   选择器{样式}
}