目录
0x00 2D动画
transform属性下的函数：
1.translate(x,y)平移
x为x轴上的平移，y为y轴上的平移
另外两种方法：
1.translateX(x)元素仅在水平方向位移
2.translateY(y)元素仅在垂直方向位移
这两种方法不能同时使用，一方会覆盖另一方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:200px;
height:300px;
/* transform:translate(200px,300px); */
transform:translateX(200px);
transform:translateY(300px);
}
</style>
</head>
<body>
<div>
月溅星河，长路漫漫，风烟残尽，独影阑珊；谁叫我身手不凡，谁让我爱恨两难，到后来，肝肠寸断。幻世当空，恩怨休怀，舍悟离迷，六尘不改；且怒且悲且狂哉，是人是鬼是妖怪，不过是，心有魔债。叫一声佛祖，回头无岸，跪一人为师，生死无关；善恶浮世真假界,尘缘散聚不分明，难断！我要这铁棒有何用，我有这变化又如何；还是不安，还是氐惆，金箍当头，欲说还休。我要这铁棒醉舞魔，我有这变化乱迷浊；踏碎灵霄，放肆桀骜，世恶道险，终究难逃。梦醒太晚！这一棒，早已灰飞烟灭…...
</div>
</body>
</html> 2.rotate（angle）旋转
正度数表示顺时针旋转，负值则相反。
3.scale（x轴上的倍数，y轴上的倍数）缩放
scale方法可以将元素根据中心原点进行缩放
width = 原来的width * x轴上的倍数
height = 原来的height * y轴上的倍数
另外两种方法：
1.scaleX(x)元素仅在水平方向上缩放
2.scaleY(y)元素在垂直方向上缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body,html{
position:relative;
width:100%;
height:100%;
}
div{
/* 居中 */
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
/* 经典三角形 */
width:0px;
height:0px;
border-top:100px solid grey;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:0px;
/* 旋转 */
/* transform:rotate(90deg); */
/* 平移 */
/* transform:translate(100px,100px); */
/* 缩放 */
transform:scale(1,1);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html> 实现：当鼠标移动到图片上，图片放大的效果：
.ms-item-lk:hover .ms-item-img{
transform:scale(1.1);
transition:0.5s;
}4.skew()倾斜
transfrom:skew(angle,angle)
包含两个参数，分别表示x轴和y轴倾斜的角度，如果第二个参数为空，则默认是0，参数为负表示向相反方向倾斜
skewX()表示只在X轴倾斜
skewY()表示只在Y轴倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:100px;
height:100px;
margin:100px auto;
background:red;
transform:skew(30deg,10deg)
}
</style>
</head>
<body>
<div>
</div>
</body>
</html> 
0x03 3D动画
1.translate3d(x,y,z)
定义3d平移
x表示x轴上的平移，y表示y轴上的平移，z表示z轴上的平移
translateZ(z)在z轴上的平移，z轴为面向屏幕的方向
perspective方法可以设置镜头到屏幕的距离
父元素上加上transform-style:preserve-3d可修改元素层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#tf1{
width:100px;
height:100px;
background:red;
transform:perspective(200px) translate3d(0px,100px,100px);
}
</style>
</head>
<body>
<div id="tf1"></div>
</body>
</html> 2.rotateX定义沿着X轴的3d旋转
rotateY定义沿着Y轴的3d旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#tf3{
width:100px;
height:100px;
background:yellow;
/* 设置过渡为2s */
transition:all 2s;
}
#tf3:hover{
transform:rotateX(180deg);
}
</style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html> 0x04 CSS3过渡
过渡指元素从一种样式逐渐改变为另一种的效果
语法：
transition:property duration timing-function delay
property:指定CSS属性的名称，多个属性之间用逗号分隔,如果为all表示，所有属性都会有过渡效果
duration:指定过渡时间
timing-function：指定转速曲线，默认值为ease（规定从慢速开始，然后变快，然后变慢），linear匀速，ease-in(慢速开始),ease-out（慢速结束）,ease-in-out（慢速开始慢速结束）
delay:定义多少秒后开始过渡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#tf3{
width:100px;
height:100px;
background:yellow;
word-break:break-all;
/* 过渡属性为width 过渡时间为1s */
transition:width 0.5s,height 0.5s;
}
#tf3:hover{
width:300px;
height:50px;
/* 如果不设置过渡，这种变化会很突兀 */
}
</style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html> 0x05 CSS3动画特效技能
@keyframes规则内指定一个css样式和动画逐步从目前的样式更改为新样式。
CSS3过渡需要一个触发事件，而CSS3动画特效并不需要触事件
语法：
定义动画
@keyframes xxx{
from{
xxx:xxx;
}
to{
xxx:xxx;
}
}
也可以定义多个：
@keyframes xxx{
0%{
xxx:xxx;
}
10%{
xxx:xxx;
}
100%{
xxx:xxx;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
animation:myAnimation 5s forwards;
}
@keyframes myAnimation{
from{
background:grey;
color:black;
}
to{
background:black;
color:greenyellow;
}
}
</style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html> 使用动画
animation:name duration timing-function delay iteration-count direction fill-mode play-state;
name:之前定义的动画的名字
duration:动画执行时间
timing-function 设置动画如何完成 默认值为ease（规定从慢速开始，然后变快，然后变慢），linear匀速，ease-in(慢速开始),ease-out（慢速结束）,ease-in-out（慢速开始慢速结束）
delay:设置动画在启动前的延迟间隔
count：设置动画的播放次数，设置为infinite表示无限播放
direction:定义是否应该反向播放动画(normal默认值，reverse反向播放，alternate奇数次正向偶数次反向，alternate-reverse奇数次反向，偶数次正向) 如果count设置为1次的话，这个属性是不会起作用的。
fill mode 规定当前动画不播放时的元素样式（none默认值，forwards动画结束后，将应用最后的属性，backwords 结束后应用之前的属性,both ）
play-state 指定动画正在运行或是已暂停（pause动画暂停，running动画进行）
车轮滚动效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
position:relative;
width:100px;
height:100px;
overflow:hidden;
word-wrap:break-word;
text-align:center;
animation:myAnimation 6s ease 1s infinite alternate;
border-radius:50%;
background:radial-gradient(white,grey 50%,black 80%);
}
@keyframes myAnimation{
0%{
left:0px;
background:radial-gradient(white,grey 50%,black 80%);
}
70%{
left:2%;
transform:rotate(1080*5deg);
background:radial-gradient(yellow,orange 50%,red 80%);
}
100%{
left:97%;
transform:rotate(10800deg);
background:radial-gradient(yellow,orange 50%,red 80%);
}
}
</style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html> 0x06 CSS3 flex弹性布局
1.基本概念：
flex布局可以将一个元素看成一个容器，父元素下的子元素会自动成为子容器，这样就构成一个flex item
容器存在两个轴：
水平的主轴（main axis）:开始的位置叫main start 结束的位置叫做main end；
垂直的交叉轴(cross axis)：交叉轴的开始位置叫做 cross start 结束位置叫做 cross end
每个item占据的主轴空间叫做main size
占据的交叉轴空间叫 cross size；
用法：
使用flex布局，需要在父元素上设置display属性：
.flexTest{
display:-webkit-flex;/*safari*/
display:flex;
}或者将其显示为行内元素
.flexTest{
display:-webkit-inline-flex;/*safari*/
display:inline-flex;
}注意，设置flex布局后，子元素的float,clear,vertical-align都会失效
2.flex容器（父元素）的六大属性
(1)flex-direction属性决定主轴的方向
| 值 | 描述 |
| row | 默认值。主轴为水平方向，main-start起点在左边 |
| row-reverse | 主轴为水平方向，起点在右边 |
| column | 主轴为垂直方向，起点在上面 |
| column-reverse | 主轴为垂直方向，起点在下边 |
父元素的子元素的是沿着父元素设置的主轴方向排列，如果主轴方向（flex-direction）为row，那么子元素就从左向右排列。如果主轴方向是column，那么子元素就是从上向下排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#flexTest{
display:flex;
/* flex-direction:row-reverse; */
/* flex-direction:column-reverse; */
flex-direction:column;
}
.item{
width:100px;
height:100px;
margin:10px;
background:green;
}
</style>
<body>
<div id="flexTest">
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
</div>
</body>
</html>(2)flex-wrap属性设置子项目的换行方式
| 值 | 描述 |
| nowrap | 默认值。不换行。如果父元素的宽度小于子元素的宽度和，那么子元素的宽度会自动缩放来适应父元素的宽度 |
| wrap | 换行，从上往下排列，第一行在上方。 |
| wrap-reverse | 换行，从下往上排列，第一行在下方。 |
(3)flex-flow属性是flex-direction属性和flex-wrap属性的简写方式，默认值是row nowrap。
可以同时设置主轴方向和换行方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#flexTest{
display:flex;
/* flex-wrap:wrap; */
/* flex-wrap:wrap-reverse; */
flex-flow:column wrap;
width:360px;
height:360px;
}
.item{
width:100px;
height:100px;
margin:10px;
background:green;
}
</style>
<body>
<div id="flexTest">
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
</div>
</body>
</html>(4)justify-content属性设置子项目在主轴上的对齐方式:
| 值 | 描述 |
| flex-start | 默认值。左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，子项目之间间隔一样 |
| space-around | 每个子项目两侧的间隔一样 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#flexTest{
display:flex;
/* flex-wrap:wrap; */
/* flex-wrap:wrap-reverse; */
flex-flow:row wrap;
justify-content:space-around;
height:360px;
}
.item{
width:100px;
height:100px;
margin:10px;
background:green;
}
</style>
<body>
<div id="flexTest">
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
</div>
</body>
</html>(5)align-items属性规定子项目在交叉轴上的对齐方式,主要设置单行情况下（注意baseline设置的是一行如何对齐，对齐标准是横向的，其他的属性对齐标准都是纵向的）
| 值 | 描述 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 以子项目的第一行文字为基线对齐 |
| stretch | 默认值，如果子项目未设置固定高度，将占满整个容器的高度 |
(6)align-content 设置多行情况下的对齐方式
| 值 | 描述 |
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| space-between | 与交叉轴的两端对齐，每行之间间隔一样 |
| space-around | 每行上下的间隔一样 |
| stretch | 默认值，占满整个空间，每行下方留一点空白 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#flexTest{
display:flex;
/* justify-content:space-around; */
/* 比较 */
/* 居中 */
/* align-items:center; */
/* 虽然居中但是行与行之间的间距比较大 */
/* align-content:center; */
/* 对齐起点 */
/* align-items:flex-start; */
align-content:flex-start;
/* 对齐终点 */
/* align-items:flex-end; 有较大行间距*/
/* align-content:flex-end; */
/* align-content:space-between; */
/* align-content:space-around; */
/* align-content:stretch; */
align-items:baseline;
flex-wrap:wrap;
width:360px;
height:900px;
}
.item{
width:100px;
height:100px;
margin:10px;
background:green;
}
</style>
<body>
<div id="flexTest">
<div class='item' style="padding:10px">1<br/>11</div>
<div class='item' style="padding:30px">2<br/>12</div>
<div class='item' style="padding:30px">3<br/>13</div>
<div class='item' style="padding:30px">4<br/>14</div>
<div class='item' style="padding:30px">5<br/>15</div>
<div class='item' style="padding:30px">6<br/>16</div>
</div>
</body>
</html>3.flex item子元素的六大属性
(1)order属性
规定子容器的排列顺序，数值越小越靠前，默认为0，支持负数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#flexTest{
display:flex;
}
.item{
width:100px;
height:100px;
margin:10px;
background:grey;
}
.item1{
order:3;
}
.item2{
order:2;
}
.item3{
order:4;
}
</style>
<body>
<div id="flexTest">
<div class='item item1' style="padding:10px">1<br/>11</div>
<div class='item item2' style="padding:30px">2<br/>12</div>
<div class='item item3' style="padding:30px">3<br/>13</div>
<div class='item item4' style="padding:30px">4<br/>14</div>
<div class='item item5' style="padding:30px">5<br/>15</div>
<div class='item item6' style="padding:30px">6<br/>16</div>
</div>
</body>
</html>(2)flex-grow属性
规定子容器的放大比例，默认为0，剩余空间不足则不会放大
如果子容器的flex-grow属性都为1，则等分剩余空间，即每个子元素的宽度都是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#flexTest{
display:flex;
}
.item{
/* 不设置子容器的宽和高，子容器的宽高取决于content和padding */
/* width:100px;
height:100px; */
flex-grow:1; /* 表示在宽度上等分父元素的剩余空间，因为父元素是块级元素所以要占满一整行 */
margin:10px;
background:grey;
}
.item1{
order:3;
}
.item2{
order:2;
}
.item3{
order:4;
}
</style>
<body>
<div id="flexTest">
<div class='item item1' style="padding:10px">1<br/>11</div>
<div class='item item2' style="padding:30px">2<br/>12</div>
<div class='item item3' style="padding:30px">3<br/>13</div>
<div class='item item4' style="padding:30px">4<br/>14</div>
<div class='item item5' style="padding:30px">5<br/>15</div>
<div class='item item6' style="padding:30px">6<br/>16</div>
</div>
</body>
</html>示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#flexTest{
display:flex;
}
.item{
margin:10px;
background:grey;
flex-grow:1;
}
.item2{
flex-grow:2;
/* 因为其他元素的flex-grow是1，所以该元素的宽度是其他元素的两倍 */
}
</style>
<body>
<div id="flexTest">
<div class='item item1' style="padding:10px">1<br/>11</div>
<div class='item item2' style="padding:30px">2<br/>12</div>
<div class='item item3' style="padding:30px">3<br/>13</div>
<div class='item item4' style="padding:30px">4<br/>14</div>
<div class='item item5' style="padding:30px">5<br/>15</div>
<div class='item item6' style="padding:30px">6<br/>16</div>
</div>
</body>
</html>此外还可以通过min-width和min-height来设置最低宽度。
(3)flex-shrink
flex-shrink属性规定了子容器的缩小比例，默认为1，如果空间不足，该子容器将缩小.
如果设置为0，则不会自动缩小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#flexTest{
display:flex;
}
.item{
/* min-width:100px; */
margin:10px;
background:grey;
flex-grow:1;
flex-shrink:1;
}
.item2{
flex-shrink:2;
}
</style>
<body>
<div id="flexTest">
<div class='item item1' style="padding:30px">1<br/>11</div>
<div class='item item2' style="padding:30px">2<br/>12</div>
<div class='item item3' style="padding:30px">3<br/>13</div>
<div class='item item4' style="padding:30px">4<br/>14</div>
<div class='item item5' style="padding:30px">5<br/>15</div>
<div class='item item6' style="padding:30px">6<br/>16</div>
</div>
</body>
</html>(4)flex-basis属性
可修改子容器占据的主轴空间的大小。默认值为auto，即子容器的本来大小=width。如果设置了flex-basis，flex-basis会覆盖width。建议：设置item的宽度时不要用width，统一用flex-basis
(5)flex属性：
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto，后两个属性可选
该属性设置为auto的时候，等同于（1 1 auto）即父元素有剩余空间时，等分剩余空间，父元素宽度缩小时，item跟随缩小。 none等同于（0 0 auto）即不放大 不缩小 容器宽度为本来的宽度
建议:优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
(6)align-self属性
允许单个子容器与其他子容器有不一样的（交叉轴）对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性。
可选值同 align-items相同：auto flex-start flex-end center baseline stretch
