css3-flex布局

最新推荐文章于 2024-08-10 17:13:35 发布

itskhdu

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量4.5k

点赞数

分类专栏： css 文章标签： css3 flex 布局响应式 css

本文链接：https://blog.csdn.net/dkh_321/article/details/78093753

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第1章 flex布局
Flex布局（伸缩布局盒模型）是CSS3提出的一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Flex布局对子元素的影响：
• 子元素的float、clear和vertical-align属性将失效。
• 解决了margin重叠问题
flex布局的语法有三个版本：
• 旧版本（2009），使用display:box或者display:inline-box
• 混合版本（2011），使用display:flexbox或者display:inline-flexbox
• 最新版本，使用display:flex或者display:inline-flex
• 兼容
display:flexbox;
display:flex;
1.1 flexbox模型术语

• 伸缩容器：设置display:flex的元素
• 伸缩项目：伸缩容器的子元素
• 主轴：伸缩项目的布局方向的延伸
• 侧轴：与主轴垂直的轴称作侧轴（交叉轴）
• main start：主轴的开始位置（与边框的交叉点）
• main end：主轴的结束位置；
• cross start：侧轴(交叉轴)的开始位置，
• cross end：侧轴(交叉轴)结束位置。
• main size：单个项目占据的主轴空间，
• cross size：单个项目占据的侧轴空间

1.2 flex容器属性
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
1.2.1 flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）
语法
flex-direction: row | row-reverse | column | column-reverse;
值描述
row 默认值，主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在上端
column-reverse 主轴为垂直方向，起点在下端
➢ row：

➢ row-reverse

➢ column

➢ column-reverse

1.2.2 flex-wrap
用来决定容器内的项目是单行还是多行显示
值描述
nowrap 默认值，不换行，容器内的项目可能会超出容器
wrap 换行显示
wrap-reverse 换行显示，第一行在下面，

1.2.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
语法
flex-flow: <flex-direction> || <flex-wrap>;
flex-flow:column wrap;
1.2.4 justify-content
justify-content属性定义了项目在主轴上的对齐方式，从而调整伸缩项目之间的间距。
值描述
flex-start （默认值），项目向一行内的起始位置对齐
flex-end 项目向一行内的结束位置对齐
center 项目向一行内的中间位置对齐
space-between 项目会平均地分布在行里，两端对齐
space-around 项目会平均地分布在行里，两端保留一半的空间

1.2.5 align-items
align-items属性定义项目在侧轴上如何对齐
值描述
flex-start 与侧轴起始方向对齐
flex-end 向侧轴终点方向对齐
center 向侧轴中点方向对齐。
baseline 在侧轴上保持基线对齐，以第一个项目的基线为准
strength （默认），在侧轴方向拉伸每个项目，使每个项目保持相同的起始位置和终点位置

1.2.6 align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
值描述
flex-start 与侧轴的起点对齐
flex-end 与侧轴的终点对齐
center 与侧轴的中点对齐
space-between 与侧轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch （默认值），轴线占满整个侧轴

1.3 flex项目属性
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1.3.1 order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
1.3.2 flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
1.3.3 flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
1.3.4 flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，如果有则给项目设置对应的空间大小。它的默认值为auto，即项目的本来大小。
1.3.5 flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
1.3.6 align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

值描述
flex-start 与侧轴起始方向对齐
flex-end 向侧轴终点方向对齐
center 向侧轴中点方向对齐。
baseline 在侧轴上保持基线对齐，以第一个项目的基线为准
strength （默认），在侧轴方向拉伸每个项目，使每个项目保持相同的起始位置和终点位置

基线对齐是以伸缩项目内的文字基线对齐，为了查看效果，我们测试时把项目的文字设置成不同的size，

1.3.7 flex项目主轴宽度计算

1.3.7.1 项目缩小
*{box-sizing: border-box;}
.flex{
display: flex;
width: 600px;
}
.flex div{
border:1px solid #ccc;
line-height: 100px;
background: orangered;
text-align: center;
}
.flex div:nth-child(1){
flex: 1 2 200px;
}
.flex div:nth-child(2){
flex: 2 2 300px;
}
.flex div:nth-child(3){
flex: 2 1 300px;
}

以上代码子元素basis超出父容器，这时的计算方法
溢出值P= basis1+basis2+basisN-ContainerWidth
单独元素加权值V= shrink*basis
总体加权值T= V1+V2+.....Vn
元素宽度W = basis-V/T*P

套用公式：
P=200+300+300-600=200
T=200*2+300*2+300*1=1300
W1=200-400/1300*200
W2=300-600/1300*200
W3=300-300/1300*200

1.3.7.2 项目放大
当以上的样式中改动
.flex{
display: flex;
width: 1000px;
}
这时项目需要放大
• 公式：
放大值P=width-( basis1+basis2+...basisn)
总体加权值T= grow1+...grown
元素宽度W =basis+grow/T*P
• 计算：
P=1000-200-300-300=200
T=1+2+2=5
W1=200+1/5*200
W2=300+2/5*200
W3=300+2/5*200

1.4 版本对比
1.4.1 伸缩流方向
版本
属性名称水平方向反向水平垂直水平反向垂直
新版 flex-direction row row-reverse column column-reverse
混合版 flex-direction row row-reverse column column-reverse
旧版 box-orient horizontal horizontal vertical vertical
box-direction normal reverse normal reverse

1.4.2 换行
版本对比
版本属性名称不换行换行反转换行
新版 flex-wrap nowrap wrap wrap-reverse
混合版 flex-wrap nowrap wrap wrap-reverse
旧版 box-lines single multiple

1.4.3 主轴对齐
版本属性名称 start center end 两端对齐
新版 justify-content flex-start center flex-end space-between
混合版 flex-pack start center end justify
旧版 box-pack start center end justify

1.4.4 侧轴对齐
版本属性名称 start center end baseline stretch
新版 align-items flex-start center flex-end baseline stretch
混合版 flex-align start center end baseline stretch
旧版 box-align start center end baseline stretch

1.4.5 伸缩性
版本属性名称值
新版 flex none| flex-grow flex-shrink flex-basis
混合版 flex none| flex-grow flex-shrink flex-basis
旧版 box-flex <number>

1.4.6 显示顺序
版本属性名称值
新版 order <number>
混合版 flex-order <number>
旧版 box-ordinal-group <number>

1.4.7 伸缩项目对齐
版本属性名称 start center end justify distribute stretch
新版 align-content flex-start center flex-end space-between space-around stretch
混合版 flex-line-pack start center end justify distribute stretch
旧版

1.4.8 伸缩性
版本属性名称值
新版 flex none| flex-grow flex-shrink flex-basis
混合版 flex none| flex-grow flex-shrink flex-basis
旧版 box-flex <number>

1.4.9 单个项目对齐
版本属性名称 start center end baseline stretch
新版 align-self flex-start center flex-end base-line stretch
混合版 flex-item-align start center end base-line stretch
旧版

1.5 浏览器兼容
1.5.1 自定义
.display_flex{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.display_inline-flex{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
.display_inline-flex > *{
display: block;
}
/*伸缩流方向*/
.flex-direction_column{
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.justify-content_flex-end{
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.justify-content_flex-justify{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start{
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.align-items_flex-end{
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.align-items_center{
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.align-items_baseline{
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
/*伸缩性*/
.flex_auto{
-webkit-box-flex: 1;
-ms-flex: auto;
-webkit-flex: auto;
flex: auto;
}
.flex_1{
width: 0;
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
/*显示顺序*/
.order_2{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.order_3{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}

1.5.2 gulp+autoprefixer
var gulp=require('gulp'),
autoprefixer=require('gulp-autoprefixer');
gulp.task('autoprefixer',function () {
gulp.src('gulp/src/grid.css')
.pipe(autoprefixer({
//cascade: true, //是否美化属性值默认：true 像这样：
//-webkit-box-align: start;
// -ms-flex-align: start;
///remove:true //是否去掉不必要的前缀默认：true
}))
.pipe(gulp.dest('gulp/dest'));//指定目录，生成和src同名的文件
});

gulp.task('default',['autoprefixer']);
https://www.npmjs.com/package/gulp-autoprefixer

1.6 flex布局开发
1.6.1 居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 400px;
height: 300px;
border:1px solid #ccc;
display: flex;

}
.inner{
width: 50px;
height: 50px;
background-color: #009926;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
</html>

1.6.2 手机端上中下典型布局

1.6.3 栅格布局
我们可以使用flex模仿bootstrap的栅格布局
grid.css
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.row{
display: flex;
}
.row-wrap{
flex-wrap: wrap;
}
.row-top {
align-items: flex-start;
}

.row-bottom {
align-items: flex-end;
}

.row-center {
align-items: center;
}

.row-stretch {
align-items: stretch;
}

.col{
flex: 1;
padding: 5px;
}
.col-top {
align-self: flex-start;
}

.col-bottom {
align-self: flex-end;
}

.col-center {
align-self: center;
}
.col-10{
flex:0 0 10%
}
.col-20{
flex:0 0 20%
}
.col-33{
flex:0 0 33.3333%
}
.col-40{
flex:0 0 40%
}
.col-50{
flex:0 0 50%
}
.col-60{
flex:0 0 60%
}
.col-66{
flex:0 0 66.6666%
}
.col-75{
flex:0 0 75%
}
.col-80{
flex:0 0 80%
}
.col-90{
flex:0 0 90%
}
.col-offset-10 {
margin-left: 10%; }

.col-offset-20 {
margin-left: 20%; }

.col-offset-25 {
margin-left: 25%; }

.col-offset-33 {
margin-left: 33.3333%; }

.col-offset-50 {
margin-left: 50%; }

.col-offset-66 {
margin-left: 66.6666%; }

.col-offset-75 {
margin-left: 75%; }

.col-offset-80 {
margin-left: 80%; }

.col-offset-90 {
margin-left: 90%; }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initail-scale=1,user-scalable=no">
<link rel="stylesheet" href="grid.css">
<style>
body{
background-color: #333;
}
.col-demo{
background-color: orangered;
}
</style>
</head>
<body>
<div class="content has-header">
<div class="row">
<div class="col col-33 col-offset-33">
<div class="col-demo">.col</div>
</div>
<div class="col">
<div class="col-demo">.col</div>
</div>
</div>
<div class="row">
<div class="col col-33">
<div class="col-demo">.col</div>
</div>
<div class="col col-33 col-offset-33">
<div class="col-demo">.col</div>
</div>
</div>
<div class="row">
<div class="col col-33 col-offset-66">
<div class="col-demo">.col</div>
</div>
</div>
</div>
</body>
</html>
1.6.4 手机桌面图标排列

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initail-scale=1,user-scalable=no">
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
background: url(imgs/bg.jpg) no-repeat;
background-size: cover;
height: 100%;
overflow: hidden;
padding: 10px;
}
ul{
display: flex;
list-style: none;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-around;
}
li{
width: 33.3333%;
padding: 10px;
}
li img{
width: 100%;
}
</style>
</head>
<body>
<ul>
<li><img src="imgs/360卫士.png" alt=""></li>
<li><img src="imgs/QQ.png" alt=""></li>
<li><img src="imgs/QQ音乐.png" alt=""></li>
<li><img src="imgs/土豆.png" alt=""></li>
<li><img src="imgs/微信.png" alt=""></li>
<li><img src="imgs/微博.png" alt=""></li>
<li><img src="imgs/支付宝.png" alt=""></li>
<li><img src="imgs/淘宝.png" alt=""></li>
<li><img src="imgs/爱奇艺.png" alt=""></li>
</ul>
</body>
</html>

1.6.5 表单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initail-scale=1,user-scalable=no">
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.form-group{
width: 100%;
display: flex;
}
.form-control{
color:#555;
background-color: #fff;
border: 1px solid #ccc;
outline: none;
height: 34px;
flex:1;
}
.form-item{
background: #eee;
border: 1px solid #ccc;
border-radius: 5px;
height: 34px;
line-height: 34px;
text-align: center;
padding: 0 5px;
}
.form-item:first-child{
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.form-item:last-child{
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

body{
padding: 10px;
}
.form-group{
margin: 10px 0;
}
</style>
</head>
<body>
<div class="form-group">
<span class="form-item">图标</span>
<input class="form-control">
<span class="form-item">图标</span>
</div>
<div class="form-group">
<input class="form-control">
<button class="form-item">搜索</button>
</div>
</body>
</html>

1.6.6 数据列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initail-scale=1,user-scalable=no">
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
background-color: #fff;
padding: 10px;
}
h4{
margin-top: 0;
}
img{
vertical-align: middle;
}
.media {
display: flex;
align-items: flex-start;
background: #f1f1f1;
padding: 10px;
margin-bottom: 10px;
}
.media-figure{
width: 80px;
}
.media-figure img{
width: 100%;
}
.media-figure:first-child {
margin-right: 1em;
}
.media-figure:last-child{
margin-left: 1em;
}
.media-figure.center{
align-self: center;
}

.media-body {
flex: 1;
}
.media.icon{
line-height: 30px;
}
.media.icon .media-figure{
width: 30px;
}
</style>
</head>
<body>
<div class="media">
<div class="media-figure" href="#">
<img src="imgs/微博.png" alt="...">
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo </p>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. </p>
</div>
<div class="media-figure" href="#">
<img src="imgs/支付宝.png" alt="...">
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. </p>
</div>
<div class="media-figure center" href="#">
<img src="imgs/爱奇艺.png" alt="...">
</div>
</div>
<a class="media icon">
<div class="media-figure ">
<img src="imgs/土豆.png" alt="...">
</div>
<div class="media-body">
我的信息
</div>
<div class="media-figure " href="#">
<img src="imgs/淘宝.png" alt="...">
</div>
</a>
</body>
</html>

1.6.7 sticky布局
如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}

.container{
min-height: 100%;
padding-bottom: 100px;
}
header{
height: 100px;
background-color: #ddd;
}
footer{
height: 100px;
background-color: #333;
margin-top: -100px;
}
.main{
/* height: 1500px;*/
}
</style>
</head>
<body >
<div class="container">
<header>

</header>
<div class="main">
如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送
</div>
</div>
<footer>

</footer>
</body>
</html>

1.6.8 骰子布局

1.6.9 手机QQ页面布局

第2章 transition
2.1 transition
CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
语法
transition: <property> <duration> <timing-function> <delay>;
值描述
<transition-property> 规定设置过渡效果的 CSS 属性的名称。
<transition-duration> 规定完成过渡效果需要多少秒或毫秒。
<transition-timing-function> 规定过渡函数。
<transition-delay> 定义过渡效果开始的延迟时间。

改变元素的宽度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: lightsalmon;
transition: width 2s;
}
.box:hover{
width: 100%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

2.2 过渡属性
• none
• all ，默认值。
• 只有属性具有一个中点值的属性才能具备过渡效果
• 可以同时设置多个过渡属性，使用逗号隔开

过渡方法设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: lightsalmon;
opacity: 0.3;
transition: all 2s;
/*也可以单独设置属性*/
transition: opacity 2s,background-color 2s,border-radius 2s;
}
.box:hover{
border-radius: 100%;
background-color: blue;
opacity: 1;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

支持过渡的属性列表
background-color font-size outline-offset
background-image font-weight outline-width
background-position grid-* padding-bottom
border-bottom-color height padding-left
border-bottom-width left padding-right
border-color letter-spacing padding-top
border-left-color line-height right
border-left-width margin-bottom text-indent
border-right-color margin-left text-shadow
border-right-width margin-right top
border-spacing margin-top vertical-align
border-top-color max-height visibility
border-top-width max-width width
border-width min-height word-spacing
bottom min-width z-index
color opacity zoom
crop outline-color

2.3 过渡方法
值描述
ease 逐渐变慢
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 加速然后减速
cubic-bezier 自定义动画，可以使用cubic-bezier实现以上动画效果

方法效果对比：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box div {
width: 100px;
height: 64px;
margin:10px 0;
background-color:#486AAA;
color:#fff;
text-align:center;
}
.ease {
transition: all 4s ease;
}
.ease_in{
transition: all 4s ease-in;
}
.ease_out{
transition: all 4s ease-out;
}
.ease_in_out{
transition: all 4s ease-in-out;
}
.linear{
transition: all 4s linear;
}
.box:hover div{
margin-left:89%;
}
</style>
</head>
<body>
<div class="box">
<div class="ease">ease</div>
<div class="ease_in">ease-in</div>
<div class="ease_out">ease-out</div>
<div class="ease_in_out">ease-in-out</div>
<div class="linear">linear</div>
</div>
</body>
</html>

cubic-bezier可以在线工具生成，如：http://cubic-bezier.com/

cubic-bezier使用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: lightsalmon;
transition: all 3s cubic-bezier(.37,.97,.83,-0.07);
}
.box:hover{
width: 500px;
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

2.4 过渡触发
给元素指定了transition属性，但并不会触发过渡效果，需要通过用户的行为触发，常用的行为有：
• ：hover
• ：active
• ：focus
• ：checked
• @media

2.5 单独控制属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: lightsalmon;
opacity: 0.3;
transition-property: opcity,width,height;
transition-duration: 2s;
transition-timing-function: ease, linear,ease-in-out;
transition-delay: 0s;
}
.box:hover{
opacity: 1;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

2.6 steps()
step函数指定了一个阶跃的过渡函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

以下代码对比start和end的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
box-sizing: border-box;
}
.container{
width: 700px;
background-color: #ccc;
}
.box{
width: 100px;
height: 100px;
background-color: pink;
}
.start{
transition: width 6s steps(6,start);
}
.end{
transition: width 6s steps(6,end);
}
.container:hover .box{
width: 700px;
}
</style>
</head>
<body>
<div class="container">
<div class="box start">steps(6,start)</div>
<br/>
<div class="box end">steps(6,end)</div>
</div>
</body>
</html>

使用精灵图片实现动画效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:125px ;
height: 150px;
background: url(walk.jpg) no-repeat 0 0;
transition: background-position 5s steps(15);
}
div:hover{
background-position:-1875px 0;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>

第3章 transform
transform是CSS3提供用于元素变形的属性，目前支持平移、旋转、缩放和倾斜效果，使用transfrom属性的元素，也不会影响x、y轴上的任何组件。
在学习之前，我们先了解一下页面的坐标系

语法：
transform：none|<transform-function> [<transform-function>]*

none:表示不进么变换。使用多个变形函数时用空格隔开。
3.1 2D变形
3.1.1 旋转 rotate
rotate(angle) 通过指定的角度参数对元素2D旋转，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
如：transform:rotate(45deg) 和 transform: rotate(-130deg)

代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #333;
margin: 50px;
}
section{
margin: 0 auto 50px;
width: 200px;
height: 200px;
border:1px dashed #fff;
}
.box{
width: 100%;
height: 100%;
background-color: orangered;
transition: all 1s linear;
font-size: 20px;
}
.r1:hover{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.r2:hover{
-webkit-transform: rotateX(-130deg);
transform: rotate(-130deg);
}

</style>
</head>
<body>
<section >
<div class="box r1">
rotate(45deg)
</div>
</section>
<section >
<div class="box r2">
rotate(-130deg)
</div>
</section>
</body>
</html>

3.1.2 位移 translate、translateX、translateY
translate将元素向指定的方向移动，类似于position中的relative。可以简单的理解为，使用translate(x,y)函数，你可以把元素从原来的位置移动，而不影响在X、Y轴上任何组件。

translate(50px,50px) translate(-40px,-50%)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #333;
margin: 100px;
}
section{
margin: 0 auto 50px;
width: 200px;
height: 200px;
border:1px dashed #fff;
}
.box{
width: 100%;
height: 100%;
background-color: orangered;
transition: all 1s;
}

#box1:hover{
transform: translate(50px,50px);

}
#box2:hover{
transform: translate(-40px,-50%);
}
</style>
</head>
<body>
<section>
<div id="box1" class="box">
translate(50px,50px)
</div>
</section>
<section>
<div id="box2" class="box">
translate(-40px,-50%)
</div>
</section>
</body>
</html>

在translate(x,y)的基础上也可以拆分成translateX(x)和translateY(y) 上面的第二图效果可以写成transform: translateX(50px) translateY(50px);

3.1.3 缩放 scale、scaleX、scaleY
缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #333;
margin: 50px;
}
section{
margin: 0 auto 50px;
width: 200px;
height: 200px;
border:1px dashed #fff;
}
.box{
width: 100%;
height: 100%;
background-color: orangered;
opacity: 0.8;
transition: all 1s linear;
font-size: 20px;
}
.s1:hover{
/*一个值代码x和y都是1.2*/
-webkit-transform: scale(1.2);
transform:scale(1.2);
}
.s2:hover{
/*一个值代码x和y都是0.8*/
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.s3:hover{
-webkit-transform: scale(1.3,0.7);
transform: scale(1.3,0.7);
}
</style>
</head>
<body>
<section >
<div class="box s1">
scale(1.2)
</div>
</section>
<section >
<div class="box s2">
scale(0.8)
</div>
</section>
<section >
<div class="box s3">
scale(1.3,0.7)
</div>
</section>
</body>
</html>

在scale()的基础上也可以拆分成scaleX()和scaleY()
3.1.4 倾斜skew、skewX、skewY
倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。skew根据仿射变换进行变形计算。
skew的坐标系如下图，y轴顺时针转为正，X轴逆时针转为正

transform: skew(45deg,0deg); transform: skew(0deg,30deg);



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #333;
margin: 50px;
}
section{
margin: 0 auto 80px;
width: 200px;
height: 200px;
border:1px dashed #fff;
position: relative;
}
section:before,
section:after,
.box:before,
.box:after{
content:'';
position: absolute;
}
section:before,
section:after {
background-color: lightblue;
z-index: 10;
}
.box:before,
.box:after{
background-color: #fff;
}
section:before,.box:before{
top:50%;
height: 1px;
left:0;
transform: translateY(-50%);
width: 100%;
}
section:after,.box:after{
left:50%;
width: 1px;
top:0;
transform: translateX(-50%);
height: 100%;
}
.box{
width: 100%;
height: 100%;
background-color: orangered;
transition: all 10s linear;
font-size: 20px;
position: relative;
}
.r1:hover{
-webkit-transform: skew(45deg,0deg);
transform: skew(45deg,0deg);
}
.r2:hover{
-webkit-transform: skew(0deg,30deg);
transform: skew(0deg,30deg);
}
.r3:hover{
-webkit-transform: skew(-60deg,-60deg);
transform: skew(-60deg,-60deg);
}
.r4:hover{
-webkit-transform: skew(180deg,180deg);
transform: skew(180deg,180deg);
}
.r5:hover{
-webkit-transform: skew(360deg,360deg);
transform: skew(360deg,360deg);
}
</style>
</head>
<body>
<section >
<div class="box r1">
skew(45deg,0deg)
</div>
</section>
<section >
<div class="box r2">
skew(0deg,30deg)
</div>
</section>
<section >
<div class="box r3">
skew(-60deg,-60deg)
</div>
</section>
<section >
<div class="box r4">
skew(180deg,180deg)
</div>
</section>
<section >
<div class="box r5">
skew(360deg,360deg)
</div>
</section>
</body>
</html>

在skew()的基础上也可以拆分成skewX()和skewY()

3.2 3D变形
在学习变形函数之前我们先掌握几个属性：transform-style,perspective,perspective-origin
3.2.1 transform-style
transform-style属性规定如何在 3D 空间中呈现被嵌套的元素，此属性要设置在父元素上.
flat 默认值，所有子元素在2D平面呈现
preserve-3d 所有子元素在3D空间内呈现。如果设置overflow:hidden，将会失去3d效果，呈现2d效果
3.2.2 perspective
perspective 属性定义 3D 元素距视点的距离，以像素计，此属性要写到父元素内。
perspective取值为none或不设置，就没有真3D空间。
perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
perspective的值无穷大，或值为0时与取值为none效果一样。
语法
perspective: number || none;
值描述 number 元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视
除了perspective属性可以激活3D空间，perspective()也可以激活3D空间，不同的是perspective()使用在当前变形的元素. transform:perspective(600px)

3.2.3 perspective-origin
perspective-origin属性是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置，在该位置观看者好像在观看该元素的子元素。。
语法
perspective-origin: x-axis y-axis;

其属性值可以是：关键词、length、%
x-axis指定相对于元素的包含框的X轴上的位置。它可以是长度值（以受支持的长度单位表示）、百分比或以下三个关键词之一：left（表示在包含框的X轴方向长度的0%），center（表示中间点）,或right（表示长度的100%）。
y-axis指定相对于元素的包含框的Y轴上的位置。它可以是长度值、百分比或以下三个关键词之一：top（表示在包含框的Y轴方向长度的0%），center（表示中间点），或bottom（表示长度的100%）。
注意，为了指转换子元素变形的深度，perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective属性结合起来使用，以便将视点移至元素的中心以外位置
3.2.4 3d旋转
CSS33D变形中旋转函数：rotateX()、rotateY()、rotateZ()、rotate3d()

rotateZ()函数指定元素围绕Z轴旋转，如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，并且效果和rotate()效果等同，但他不是在2D平面的旋转。
rotate3d(x,y,z,a)
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

旋转效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #333;
}
section{
margin: 0 auto 100px;
width: 200px;
height: 200px;
border:1px dashed #fff;
position: relative;
/*3d效果需要以下两个属性*/
transform-style: preserve-3d;
perspective: 200px;
}

.box{
width: 100%;
height: 100%;
background-color: orangered;
transition: transform 1s;
}
.rotateX{
transform-origin: bottom;
}
.rotateX:hover{
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
}
.rotateY{
transform-origin: 70px 130px;
}
.rotateY:hover{
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
.rotate3d:hover{
-webkit-transform: rotate3d(1,1,1,45deg);
transform: rotate3d(1,1,1,45deg);
}
</style>
</head>
<body>
<h1>rotate </h1>
<section >
<div class="box rotateX">
rotateX(45deg)
</div>
</section>
<section >

<div class="box rotateY">
rotateY(45deg)
</div>
</section>
<section >
<div class="box rotate3d">
rotate3d(1,1,1,45deg)
</div>
</section>
</body>
</html>

3.2.5 3d位移
在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。
transform: translate3d(50px,50px,-50px);
当我们进行Z轴位移时，如果值大于0，元素会呈现一个放大的效果，当值小于0，元素会呈现一个缩小的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
transform-style: preserve-3d;
perspective: 300px;
}
.box{
margin: auto;
width: 100px;
height: 100px;
background-color: #007aff;
transition: all 1s;
transform-origin:center;
}
#box1:hover{
transform: translate3d(0,0,100px);
}

</style>
</head>
<body>
<div class="container">
<div id="box1" class="box">
translate3d(0,0,100px)
</div>
</div>
</body>
</html>

3.2.6 3d缩放
CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１大于0.01时，元素缩小
scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。下面我们来看一个实例，为了能看到scaleZ()函数的效果，我们添加了一个rotateX(45deg)功能：
transform: scaleZ(2) rotateX(45deg);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin-top: 100px;
background-color: #333;
}
.container{
transform-style: preserve-3d ;
perspective: 100px;
}
section{
margin: 0 auto 50px;
width: 200px;
height: 200px;
border:1px dashed #fff;
}
.box{
width: 100%;
height: 100%;
background-color: orangered;
transition: all 1s linear;
font-size: 20px;
}
#box1:hover{
transform-origin: center;
transform: scaleZ(1.3) rotateX(45deg);
}
</style>
</head>
<body>
<div class="container">
<section >
<div id="box1" class="box">
</div>
</section>
</div>
</body>
</html>

3.3 transform-origin
transform-origin用来设置元素的变形原点，默认情况，变形的原点在元素的中心点。
语法
transform-origin: x-axis y-axis z-axis;

2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Ｙ轴的位置。
3D的变形中的transform-origin属性还包括了Ｚ轴的第三个值
这三个值可以是关键词、length、%
为了方便记忆，可以把关键词和百分比值对比起来记
top = top center = center top = 50% 0
right = right center = center right = 100%或(100% 50%)
bottom = bottom center = center bottom = 50% 100%
left = left center = center left = 0或(0 50%)
center = center center = 50%或（50% 50%）
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%

3.4 backface-visibility
backface-visibility属性决定元素旋转背面是否可见。
语法 backface-visibility: hidden|| visible

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 50px;
border:1px solid red;
transform-style: preserve-3d;
perspective: 500px;
}
.box{
height: 100%;
background-color: pink;
transition: all 1s;
}
.container:hover .box{
backface-visibility: visible;
transform:rotateY(180deg)
}
</style>
</head>
<body>
<div class="container">
<div class="box">
正面
</div>
</div>
</body>
</html>

3.5 变形实例
3.5.1 立方体

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cube{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 60px;
position: relative;
transform-style: preserve-3d;
color:#fff;
margin: auto;
transition:all 3s;
}
.cube:hover{
transform:rotate3d(1,1,1,360deg);
}
.cube>div{
position: absolute;
height: 100%;
width: 100%;
}
.front{
transform: translateZ(100px);
background-color: red;
}
/*先位移在旋转*/
.behind{
transform: translateZ(-100px) rotateX(180deg);
background-color: blue;
}
.left{
transform: translateX(-100px) rotateY(-90deg);
background-color: purple;
}
.right{
transform: translateX(100px) rotateY(90deg);
background-color: pink;
}
.bottom{
transform: translateY(100px) rotateX(-90deg);
background-color: green;
}
.top{
transform: translateY(-100px) rotateX(90deg);
background-color: black;
}

</style>
</head>
<body>
<div class="cube">
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="front">front</div>
<div class="behind">behind</div>
</div>

</body>
</html>

3.5.2 圆形布局

圆形布局的方式可以让每个元素的默认位置在一起，然后通过设置相同的transform-origin和不同的rotate实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
box-sizing: border-box;
}
.box{
width: 400px;
height: 400px;
border:5px solid #333;
border-radius: 100%;
position: relative;
margin: auto;
}
.box div{
font-size: 30px;
text-align: center;
position: absolute;
top:5px;
left:0;
right:0;
height: 30px;
line-height: 30px;
width: 40px;
margin: auto;
transform-origin: center 190px;/*400/2-5-5,半径-border-top*/
}
.box span{
display: inline-block;
}
.box div:nth-child(1){
transform: rotate(30deg);
}
.box div:nth-child(1) span{
transform: rotate(-30deg);
}
.box div:nth-child(2){
transform: rotate(60deg);
}
.box div:nth-child(2) span{
transform: rotate(-60deg);
}
.box div:nth-child(3){
transform: rotate(90deg);
}
.box div:nth-child(3) span{
transform: rotate(-90deg);
}
.box div:nth-child(4){
transform: rotate(120deg);
}
.box div:nth-child(4) span{
transform: rotate(-120deg);
}
.box div:nth-child(5){
transform: rotate(150deg);
}
.box div:nth-child(5) span{
transform: rotate(-150deg);
}
.box div:nth-child(6){
transform: rotate(180deg);
}
.box div:nth-child(6) span{
transform: rotate(-180deg);
}
.box div:nth-child(7){
transform: rotate(210deg);
}
.box div:nth-child(7) span{
transform: rotate(-210deg);
}
.box div:nth-child(8){
transform: rotate(240deg);
}
.box div:nth-child(8) span{
transform: rotate(-240deg);
}
.box div:nth-child(9){
transform: rotate(270deg);
}
.box div:nth-child(9) span{
transform: rotate(-270deg);
}
.box div:nth-child(10){
transform: rotate(300deg);
}
.box div:nth-child(10) span{
transform: rotate(-300deg);
}
.box div:nth-child(11){
transform: rotate(330deg);
}
.box div:nth-child(11) span{
transform: rotate(-330deg);
}
</style>
</head>
<body>
<div class="box">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
</div>
</body>
</html>

3.5.3 六棱形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin-top:300px;
}
div{
width: 100px;
height: 57.73px;
background-color: lightsalmon;
position: relative;
}
div:after,div:before{
content:'';
position: absolute;
top:0;
left:0;
width: inherit;
height: inherit;
background-color: inherit;
}
div:after{
transform: rotate(-60deg);
}
div:before{
transform: rotate(60deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

第4章 animation
CSS3的animation属性可以像Flash制作动画一样，通过关键帧控制动画的每一步，实现更为复杂的动画。
animation实现动画主要由两个部分组成：
1. 通过@keyframes来声明一个动画
2. 在animation属性中调用关键帧声明的动画

animation: name duration timing-function iteration-count direction mode;

基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #333;
}
.box{
width: 100px;
height: 100px;
background-color: orangered;
animation: move 4s ease 0s infinite;
}
@keyframes move {
0%{
transform: translateX(100px);
}
30%{
transform: translateX(400px);
}
60%
{
transform: translateX(200px);
}
100%{
transform: translateX(500px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4.1 @keyframes
使用@keyframes声明动画
• @keyframes后面紧接着是这个“动画的名称”加上一对花括号“{}”
• @keyframes中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性
• 我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。
@keyframes move{//Name动画名称
from{//等同于0%
//样式代码
}
to{//等同于100%
//样式代码
}
}
@-webkit-keyframes move{//Name动画名称
from{//等同于0%
//样式代码
}
to{//等同于100%
//样式代码
}
}

-webkit-animation: move 4s ;
animation: move 4s ;
4.2 animation-name
是用来定义一个动画的名称，其主要有两个值：Keyframes创建的动画名或者none；none为默认值，当值为none时，将没有任何动画效果。我们可以同时附几个animation-name给一个元素，我们只需要用逗号“，”隔开
4.3 animation-duration
animation-duration是用来指定元素播放动画所持续的时间长，取值:为数值，单位为s （秒.）其默认值为“0”。这个属性跟transition中的transition-duration使用方法是一样的。
4.4 animation-timing-function
是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。
4.5 animation-delay
是用来指定元素动画开始时间。取值为为数值，单位为s(秒)，其默认值也是0。这个属性和transition-delayy使用方法是一样的。
4.6 animation-iteration-count
animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。
4.7 animation-direction
animation-direction是用来指定元素动画播放的方向,有4个值。
• normal:默认值，表示一直向前，最后一帧结束后回到第一帧
• reverse:与normal的运行方向相反
• alternate:往前播放完了之后，然后再倒带，倒带到头了再往后播放
• alternate-reverse:与alternate的运行方向相反

值对比效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
.box1.on{
animation: on 5s 1s infinite normal;
}
.box2{
top:140px;
}
.box2.on{
animation: on 3s 1s infinite reverse;
}
.box3{
top:280px;
}
.box3.on{
animation: on 3s 1s infinite alternate;
}
.box4{
top:420px;
}
.box4.on{
animation: on 3s 1s infinite alternate-reverse;
}
@keyframes on {
from{
left:0;
}
to{
left:-moz-calc(100% - 100px);
left:-webkit-calc(100% - 100px);
left: calc(100% - 100px);
}
}
</style>
</head>
<body>
<div class="box box1 on">normal</div>
<div class="box box2 on">reverse</div>
<div class="box box3 on">alternate</div>
<div class="box box4 on">alternate-reverse</div>
</body>
</html>
4.8 animation-fill-mode
设置动画结束后的状态
• none：默认值。表示动画应用之时、动画延时执行之前之前、以及动画结束之后，元素呈现的都是默认状态
• forwards：设置对象状态为动画结束时的状态，对应"to"或"100%"帧，如果应用alternate值，是"from"或"0%"关键帧
• backwards：设置对象状态为动画开始时的状态, 元素处于"from"或"0%"关键帧的状态
• both：设置对象状态为动画结束或开始的状态，动画开始之前是"from"或"0%"关键帧；动画完成之后是"to"或"100%"关键帧状态

值对比：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fill-mode</title>
<style>
section{
border:1px solid #000;
width: 100px;
height: 100px;
margin: auto;
margin-bottom: 20px;
}
.box{
transform: translateY(0);
width: 100%;
height: 100%;
background-color: pink;
}
.box.on{
animation: move 1s 2s;

}
.box1.on{
animation-fill-mode: none;
}
.box2.on{
animation-fill-mode: forwards;
}
.box3.on{
animation-fill-mode: backwards;
}
.box4.on{
animation-fill-mode: both;
}

@keyframes move{
from{transform: translateX(-50px)}
to {transform: translateX( 50px)}
}
</style>
</head>
<body>

<section><div class="box box1 on">none</div></section>
<section><div class="box box2 on">forwards</div></section>
<section><div class="box box3 on">backwards</div></section>
<section><div class="box box4 on">both</div></section>
</body>
</html>
4.9 animation-play-state
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持，所以只是稍微提一下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation-direction</title>
<style>
*{
box-sizing: border-box;
}
body{
padding-top: 200px;
}
.box{
width: 100px;
height: 100px;
top:0;
background-color: pink;
position: absolute;
}
.box1.on{
animation: on 3s 1s infinite normal;
}
#btn{
position: absolute;
right: 10px;
top:200px;
}
@keyframes on {
from{
left:0;
}
to{
left:-moz-calc(100% - 100px);
left:-webkit-calc(100% - 100px);
left: calc(100% - 100px);
}
}

</style>
</head>
<body>
<div class="box box1 on">normal</div>

<div>
<input type="button" id="btn" value="暂停/播放">

</div>
<script>
var box=document.querySelector('.box')

document.getElementById('btn').οnclick=function (e) {
var state=box.style.animationPlayState;
if(state=='paused'){

box.style.animationPlayState='running'

}
else{

box.style.animationPlayState='paused';

}
}
</script>
</body>
</html>

4.10 动画事件
js针对amination也提供了三个事件：
　　　　开始：animationstart
　　　　迭代：animationiteration
　　　　结束：animationend
但是目前版本的Chrome需要加上webkit前缀，而且还要注意大小写
　　　　开始：webkitAnimationStart
　　　　迭代：webkitAnimationIteration
　　　　结束：webkitAnimationEnd

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-width=1,user-scale=no">
<style>
*{
box-sizing: border-box;
}
.bar{
height: 15px;
border-radius: 5px;
width: 300px;
background-color: #ccc;
padding: 3px;
}
.progress{
height: 100%;
width: 0;
background-color: #007aff;
border-radius: 5px;
animation: run 3s 2s 2 forwards;
-webkit-animation: run 3s 2s 2 forwards;
}
@keyframes run {
to{
width: 100%;
}
}
@-webkit-keyframes run {
to{
width: 100%;
}
}
</style>
</head>
<body>
<div class="bar">
<div class="progress"></div>
</div>
<div id="result"></div>
<script>
var p=document.querySelector('.progress');
var r=document.getElementById('result');
p.addEventListener('animationStart',start)
p.addEventListener('animationIteration',run)
p.addEventListener('animationEnd',end)
p.addEventListener('webkitAnimationStart',start)
p.addEventListener('webkitAnimationIteration',run)
p.addEventListener('webkitAnimationEnd',end)
function start() {
r.innerText='动画开始执行'
}
function run() {
r.innerText='动画重新播放'
}
function end() {
r.innerText='动画执行结束'
}
</script>
</body>
</html>

animate.css库提供了大量的动画效果
https://daneden.github.io/animate.css/

第5章响应式
5.1 什么是响应式设计
就是让网站设计能够兼容多个终端，而不用为每个终端开发一个特定的版本，它是一种对于设计的全新思维模式，我们在编写时，应当向下兼容、移动优先。
响应式布局虽然能够适配不同的客户端设备，但由于兼容设备的工作量大、代码增多，会使页面加载时间变长，效率降低。

5.2 如何实现响应式
1. CSS3-Media Query
2. 原生js实现
3. 第三方开源框架如flexsible.js
5.3 媒体查询
媒体查询让网页设计者可以为不同的媒体类型，如屏幕，平面，电视，手持设备等设计不同的布局，配置不同的风格。
1.1.1 媒体类型
all 所有设备
screen 电脑显示器
print 打印用纸或打印预览视图
handheld 便携设备
tv 电视机类型的设备
speech 语意和音频盒成器
braille 盲人用点字法触觉回馈设备
embossed 盲文打印机
projection 各种投影设备
tty 使用固定密度字母栅格的媒介，比如电传打字机和终端

1.1.2 媒体类型引用
• link方式

<link rel=”stylesheet”type=”text/css”href=”screen.css” media=“screen”/>

• @import方式

@import url(print.css) print;

• @media方式
@media是css3中定义的新特性，称为媒体查询
@media screen{
/*选择器样式代码*/
body{
}
}

1.1.3 媒体特性
媒体特性是css3对媒体类型的增强版，可以看成媒体类型+CSS
特性说明 min/max支持
width 浏览器宽度 yes
height 浏览器高度 yes
device-width 设备屏幕分辨率的宽度值 yes
device-height 设备屏幕分辨率的高度值 yes
device-aspect-ratio 屏幕的宽高比 yes
device-pixel-ratio 设备像素比 yes
orientation 浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape no

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

1.1.4 媒体特性使用
@media 媒体类型 and (媒体特性) { 样式代码}

• 最大宽度max-width
指媒体类型小于或等于指定宽度时，样式生效。如：

@media screen and (max-width:480px){
.container{
width:100%;
}
}
当屏幕宽度小于或等于480px时，.container宽度为100%

• 最小宽度min-width
指媒体类型大于或等于指定宽度时，样式生效。如：
@media screen and (min-width:1024px){
.container{
width:1170px;
}
}
当屏幕宽度大于或等于1024px时，.container宽度为1170px

• 多个媒体特性使用
可以使用关键词“and”将多个媒体特性结合在一起，如：
@media screen and (min-width:600px) and (max-width:900px){
html{
font-size:16px;
}
}
当屏幕宽度在600-900px之间时，html的字体大小为16px

• 设备屏幕的输出宽度device width
智能设备上可以根据屏幕尺寸来设置响应的样式
<link rel=”stylesheet” media=”screen and (max-device-width:480px)” href=”iphone.css”/>
当设备的分辨率宽度最大为480px，使用iphone.css样式

• not 关键字
关键词not用来排除某种特定的媒体类型，也就是排除符和表达式的设备。
@media not print and (max-width:1200px){
样式代码
}
样式代码将被使用在除了打印设备和屏幕小于1200px的所有设置中

• only关键字
only用来指定某种特定的媒体类型，可以排除不支持媒体查询的浏览器。
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="a.css"/>

5.4 弹性图片
imgset的使用
弹性图片指的是不给图片设置固定尺寸，根据容器进行缩放。实现方法比较简单。

img{max-width:100%;}

也可以使用背景图片的方式实现

.response-img{
background-image:url(‘test.jpg’)
background-position: center;
background-size: cover;
}

5.5 rem使用
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

html {
font-size: 62.5%;
/*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.4rem;
/*1.4 × 10px = 14px */
}
h1 {
font-size: 2.4rem;
/*2.4 × 10px = 24px*/
}

flexible.js

5.6 横竖屏切换
• css检测
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
• js检测
//判断手机横竖屏状态：
window.addEventListener("orientationchange", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态！');
}
}, false);

5.7 浏览器判断
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
window.location.href ="Android.html";
} else {
window.location.href ="pc.html";
};

5.8 响应实例

html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="media.css">
</head>
<body>
<div class="main">
<ul>
<li>

<div class="content" id="">
<h4>media的应用实例</h4>
<p>使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用</p>
<p class="text-right"><span class="time">2016-03-31</span>
<a href="">阅读全文</a></p>
</div>

</li>
<li>

<div class="content">
<h4>media的应用实例</h4>
<p>使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用</p>
<p class="text-right"><span class="time">2016-03-31</span>
<a href="">阅读全文</a></p>
</div>
</li>
<li>

<div class="content">
<h4>media的应用实例</h4>
<p>使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用</p>
<p class="text-right"><span class="time">2016-03-31</span>
<a href="">阅读全文</a></p>
</div>
</li>
<li>

<div class="content">

<h4>media的应用实例</h4>
<p>使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用</p>
<p class="text-right"><span class="time">2016-03-31</span>
<a href="">阅读全文</a></p>
</div>
</li>
<li>

<div class="content">

<h4>media的应用实例</h4>
<p>使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用</p>
<p class="text-right"><span class="time">2016-03-31</span>
<a href="">阅读全文</a></p>
</div>
</li>
<li>

<div class="content">

<h4>media的应用实例</h4>
<p>使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用media制作响应式页面使用</p>
<p class="text-right"><span class="time">2016-03-31</span>
<a href="">阅读全文</a></p>
</div>
</li>
</ul>
</div>
</body>
</html>
style.css 文件：
*{
box-sizing: border-box;
}
body{
background-color:lightskyblue;
padding:20px;
}
a{
color:#fff;
text-decoration:none;
}
p{
margin-top:0;
}
.main{
width:700px;
margin:0 auto;
padding:10px 0 0;
}
ul::before,.content::before,.content::after{
display:block;
content:'';
position:absolute;

}
ul{
padding:0;
list-style:none;
width:100%;
position:relative;
}
ul::before{
background-color:#eee;
width:2px;
height:100%;
top:0;
}
.text-right{
text-align:right;
}
li{
margin-bottom:30px;

}

li p{
line-height:1.5;
}


li:nth-child(2n) .content::before{
background-image:url(1.png);
background-size:contain;
}
li:nth-child(2n+1) .content::before{
background-image:url(2.png);
background-size:contain;
}
.content{
padding:20px;
background-color:#fff;
border-radius:5px;
position:relative;
}
.content::before{
background-color:#fff;
width:40px;
height:40px;
border-radius:50%;
z-index:2;
top:0;
}
.content::after{
height:0;
width:0;
top:10px;
border:10px solid transparent;
border-right-color:#fff;
}

li a{
background-color:#777;
padding:10px;
}


media.css文件：

@media (min-width:600px){
.time{
width:100px;
line-height:40px;
position:absolute;
top:0;
text-align:center;
}
ul::before{
left:50%;
margin-left:-1px;
}
li{
width:50%;
margin-bottom:20px;
padding:0 50px 0 0;
position:relative;
}
li:nth-child(2n){
padding:0 0 0 50px;
margin-left:50%;
}

li:nth-child(2n+1) .content::before{
right:-70px;
}
li:nth-child(2n) .content::before{
left:-70px;
}
li:nth-child(2n) .content::after{
right:100%;

}
li:nth-child(2n+1) .content::after{
left:100%;
border-left-color:#fff;
border-right-color:transparent;
}
li:nth-child(2n) .time{
left:-200px;
}
li:nth-child(2n+1) .time{
right:-200px;
}
}
@media (max-width:760px){
.main{
width:100%;
}
}

@media (max-width: 601px){
.time{
float:left;
}
li{
padding-left:50px;
}
.content::before{
left:-70px;
}
.content::after{
right:100%;
}
ul::before{
left:-1px;
}
}

1. @charset "utf-8";
2. @media screen and (min-width:320px) and (max-width:359px){html{font-size:12px;}body{ font-size:1.2rem;}}
3. @media screen and (min-width:360px) and (max-width:374px){html{font-size:13.5px;}}
4. @media screen and (min-width:375px) and (max-width:383px){html{font-size:14.07px;}}
5. @media screen and (min-width:384px) and (max-width:392px){html{font-size:14.38px;}}
6. @media screen and (min-width:393px) and (max-width:410px){html{font-size:14.75px;}}
7. @media screen and (min-width:411px) and (max-width:413px){html{font-size:15.41px;}}
8. @media screen and (min-width:414px) and (max-width:479px){html{font-size:15.52px;}}
9. @media screen and (min-width:480px) and (max-width:511px){html{font-size:18px;}}
10. @media screen and (min-width:512px) and (max-width:639px){html{font-size:19.19px;}}
11. @media screen and (min-width:640px){html{font-size:24px;}}

第6章手机端样式汇总
6.1 -webkit
6.1.1 -webkit-text-size-adjust
解决手机横屏时文字变大：
html{
-webkit-text-size-adjust:100;
}
解决文字小于12px仍显示为12px：
html{
-webkit-text-size-adjust:none;
}

6.1.2 -webkit-line-clamp
限制在一个块元素显示的文本的行数。
为了实现该效果，它需要组合其他的WebKit属性。
p{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
6.1.3 -webkit-touch-callout
当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。
none：系统默认菜单被禁用
inherit：系统默认菜单不被禁用
a{
-webkit-touch-callout:none;
}

6.1.4 -webkit-tap-highlight-color
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色
a{
-webkit-tap-highlight-color:rgba(0,0,0,0)
}

6.1.5 -webkit-overflow-scrolling
属性控制元素在移动设备上是否使用滚动回弹效果。
div{
-webkit-overflow-scrolling: touch;
}
6.1.6 -webkit-input-placeholder
设置placeholder样式
input::-webkit-input-placeholder{
color: #000;opacity:1;
}

6.1.7 -webkit-user-select
用来指定文本的可选择性,通常会禁止用户选择

-webkit-user-select: none;
user-select: none;

6.1.8 -webkit-font-smoothing
字体平滑
-webkit-font-smoothing: antialiased

更多可参考：http://ued.ctrip.com/webkitcss/index.html

6.2 meta
6.2.1 去除Android平台中对邮箱地址的识别
<meta content="email=no" name="format-detection" />
6.2.2 去除电话号码的识别
<meta name="format-detection" content="telphone=no" />
6.2.3 苹果webapp
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>