bootstrap（1）

一、过渡
1.属性
transition-property
transition-duration
3.指定的过渡曲线函数
transition-timing-function
取值：
1.else 默认值，慢速开始，速度加速，慢速结束
2.linear 匀速
3.ease-in 慢-快
4.ease-out 快-慢
5.ease-in-out 慢速开始 慢速结束 中间先加速后减速
二、指定过渡元素的延迟时间
transition-delay
取值：以m/ms为单位的数字
三、过渡属性的编写位置
1.将过渡属性放在元素声明的样式中，有去有回
2.将过渡元素放在触发操作中（hover），只管去不管回
四、过渡简写
transition:property duration timing-function delay;
最简写的方式
transition：duration;
五、动画（重点）
1.什么是动画
使元素从一个样式逐渐变为多种样式
就是多个过渡效果结合到一起
2.动画是通过“关键帧”来控制动画的每一步
关键帧
2.1.动画执行的时间点
2.2.在该时间点的样式
3.动画的使用击步骤
3.1声明动画（定义很多关键帧）

@keyframes 动画名称{
	0%{动画刚开始的样式}
	25%{动画执行到1/4的样式}
	50%{动画执行到1/2时候的样式}
	100%{动画结束时候的样式}
}

3.2调用动画
3.2.1指定动画名称
animation-name:change;
3.2.2指定动画播放的一个周期所用时间
animation-duration:3s;
3.2.3指定动画播放速度曲线函数
animation-timing-function:linear/ease/ease-in/ease-out/ease-in-out;
3.2.4延时
animation-delay:2s;
3.2.5动画播放的次数
animation-iteration-count:infinite;
取值：具体数字 infinite 无限
3.2.6动画的执行方向
animation-direction:normal;
取值:normal 正常播放 reverse 逆向播放 alternate 轮流播放 奇数次正向播放 偶数次逆向播放
3.2.7简写animation
animation:name duration timing-function delay iteration-count direction
最少animation:name duration;
3.2.8规定动画在播放前的显示状态
animation-fill-mode:
取值：none（默认值）不显示 forwards 动画播放完毕保持最后一帧的状态 backwards 动画播放之前，在延时过程中，动画显示第一帧 both 同时设置forwards和backwards
注意：必须加延时
3.2.9设置动画处于播放或者暂停的状态
animation-play-state
取值：paused 暂停 running 播放
4.兼容低版本浏览器
如果要低版本浏览器兼容，需要在动画之前加前缀
@keyframes 动画名称{动画帧}
@-webkit-keyframes 动画名称{动画帧}
@-moz-keyframes 动画名称{动画帧}
@-ms-keyframes 动画名称{动画帧}
@-o-keyframes 动画名称{动画帧}
三、CSS优化
减少服务器压力，提高用户体验
1.css优化
尽量减少HTTP请求个数，页面顶部引入css文件，将css和js独立写在文件中
2.css代码优化
合并样式 尽量用简写
代码压缩
四、bootstrap
www.bootcss.com
1.响应式布局（重点）
Responsive web page 响应式布局/自适应网页
可以根据不同的设备（pc、pad、iPhone）
而自动的更改布局，图片，文字效果，不会影响用户体验
2.响应式必须做到以下几点
2.1.布局不能使用固定宽高，必须是流逝布局（浮动）
2.2.文字大小随着容器的大小而改变
2.3.媒体查询技术
3.如何测试响应式网页
3.1真实设备测试 好处：真实可靠 坏处：测试量极大
3.2使用第三方模拟器 好处：无需添置真实设备，测试方便吧
3.3使用chrom浏览器等自带的模拟器
好处：简单方便
坏处：测试效果有限
4.编写响应式布局----重点

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 是否允许用户缩放 1允许 0不允许
一般设置
<meta name='viewport' content='width=device-width,initial-scale=1'/>

4.2.所有内容/尺寸/图片使用相对尺寸 不能使用绝对值
4.3流逝布局+弹性布局，搭配媒体查询技术
4.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){
选择器{样式}
选择器{样式}
....
}